hightcharts详细教程

1、初始化highcharts

var chart = Highcharts.chart('container', options);

2、options 自定义图表的配置项

const options = {

  chart:{}, // 图表配置（样式，生命周期）等

  title: {}, // 图表标题配置项

  tooltip: {}, //图表数据的提示框（鼠标放到图表上显示具体数据）

  legend: {}, // 图例

  credits: {}, // 版权标签

  exporting: {}, // 导出图表功能

  plotLines: {}, // 标示线（平均值线、最高值线）

  plotBinds: {}, // 可以在图表添加不同颜色区域带，表示出明显的范围区域

  xAxis: {}, // 图表x坐标轴

  yAxis: {}, // 图表y坐标轴

  series: {}, //图表的数据

};

3、chart 配置项详解

chart: {
  style: {},// 图表样式
  type: '', // 指定图表类型
  zoomType: true, //缩放
  resetZoomButton: true, // 还原图表正常大小
  events: {}, // 图标中各种事件可以写在这里
  animation: '', //图表更新时的效果 （初始化时，在plotOptions.series.animations中的设置）
  inverted: true, // 让x，y轴显示对调(x与y轴互换位置)

}

4、title配置项

title: {
  useHTML: true,// 是否title内容使用html
  text: '我是图表标题',
  style:{}
}

提示：可以通过实例对象的setTitle（）方法设置动态更新或设置图表内容；

5、xAxis 横坐标轴

xAxis: {
  title: '横坐标名称'，
  labels: {
    enabled: true, // 是否启用标签
    formatter: funciton(){return this.value}, // 格式化标签（对标签进行处理） 还有一些特殊值isFirst、isLast、axis、chart
  }, // 横坐标标签
}

hightcharts详细教程

猜你喜欢