apexcharts

示例

安装

npm

  1. npm install apexcharts –save

  2. import ApexCharts from ‘apexcharts’

CDN

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

图表要点

  • 范围注释
1
2
3
4
5
6
7
8
9
10
11
12
13
annotations: {
  yaxis: [
    {
      y: 8600,
      y2: 9000,
      borderColor: '#000',
      fillColor: '#FEB019',
      label: {
        text: 'Y-axis range'
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
label: {
  borderColor: '#00E396',
  orientation: 'horizontal',
  style: {
    color: '#fff',
    background: '#00E396'
  },
  text: 'Y-axis annotation on 8800'
}
1
2
3
marker: {
  size: 8,
}
  • 数据标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  dataLabels: {
    enabled: true,
    style: {
        colors: ['#333']
    },
    offsetX: 30
  },
}

设置主题

Apex.theme.palette

整合使用

ng-ApexCharts：ApexCharts的Angular包装器组件
React-ApexCharts：ApexCharts的React包装器组件
Vue-ApexCharts：ApexCharts的Vue包装器组件

文本自动换行

将字符串转换成“字符串数组”

导出图表

传统上，在服务器上导出图表，使用无头浏览器（Puppeteer或PhantomJS停产），需要Node.js基础结构

ApexCharts 使用 FusionExport

无头浏览器

无须显示器、键盘和鼠标操作，通过网络连接控制

如何检查是无头浏览器

  1. User agent

“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/59.0.3071.115 Safari/537.36”

1
2
3
if (/HeadlessChrome/.test(window.navigator.userAgent)) {
    console.log("Chrome headless detected");
}
  1. 插件 Plugins

无头浏览器，插件检查，返回空数组

1
2
3
if(navigator.plugins.length == 0) {
    console.log("It may be Chrome headless");
}
  1. 语言

navigator.language 和 navigator.languages。一个是指浏览器界面的语言；一个返回的是个数组，里面存储的是浏览器用户的所有次选语言

无头浏览器，navigator.languages 返回空字符串

1
2
3
if(navigator.languages == "") {
    console.log("Chrome headless detected");
}
  1. WebGL
1
2
3
4
5
6
7
8
9
10
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');

var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

if(vendor == "Brian Paul" && renderer == "Mesa OffScreen") {
    console.log("Chrome headless detected");
}
  1. 加载失败的图片，宽、高均为0

应用场景

  • 网站及应用测试
  • JavaScript库测试
  • JavaScript模拟与交互
  • 在后台运行一个或多个自动化UI测试