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
}, // 横坐标标签
}