实例地址https://www.hcharts.cn/demo/highcharts
文档地址https://api.hcharts.cn/highcharts
ps：写在前面的话
highcharts有基于jq的版本(应该是比较旧的)，有直接用js的，两者什么区别暂时不知道，语法一样，基于jq版的，要先引入jq，然后使用方式如下：
<div id="container" style="width: 600px;height:400px;"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
// 这个highcharts.js我就不放出来了，建议用新版
<script type="text/javascript">
$('#container').highcharts({
series: [{
name: '工人',
data: [29,30,31]
}],
plotOptions : {
series : {
events : {
legendItemClick: function(event) {
console.log(this);
console.log(this.chart);
}
}
}
}
});
</script>
另外直接在官网下载的最新版本，使用如下：
<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
series: [{
name: '工人',
data: [14,20,21]
}],
plotOptions : {
series : {
events : {
legendItemClick: function(event) {
console.log(this);
console.log(this.chart);
console.log(chart);//this.chart = chart
}
}
}
}
});
</script>
下面从本人遇到过的问题开始介绍：
x轴 xAxis：
var chart = Highcharts.chart('container', {
xAxis: {
labels: {
formatter: function(){
return ['2018-06-25','2018-06-26','2018-06-27'][this.value]
}
},
tickInterval : 1,
},
series: [{
name: '工人',
data: [29,30,31]
}],
});
用labels的话，会遇到一个问题，悬浮框tooltip里面无法显示横坐标,默认是0,1,2...如下图：
image.png
xAxis: {
categories: ['2018-06-25','2018-06-26','2018-06-27'],
tickInterval : 1,
},
用categories的话，又不是从原点开始，感觉适合条形图，如下图。
image.png
解决办法：
在使用labels的时候，把series里面的data封装一下，把横坐标塞进去，这样tooltip里面的0,1,2就会换成对应横坐标。如下：
series: [{
name: '工人',
data: [['2018-06-25',29],['2018-06-26',30],['2018-06-27',31]]
}],
y轴 yAxis：(以及悬浮框tooltip 和 数据 series)
var chart = Highcharts.chart('container', {
xAxis: {
labels: {
formatter: function(){
return ['2018-06-25','2018-06-26','2018-06-27'][this.value]
}
},
tickInterval : 1,
},
yAxis: [
{
title: {
text: 'y轴1'
},
labels : {
style : {
color : 'red'
},
formatter: function(){
return this.value + '%';//这样可以加单位
}
},
gridLineWidth : 1,
gridLineDashStyle : 'ShortDash',
gridLineColor : '#ddd',
}, {
title: {
text: 'y轴2'
},
opposite: true,//显示在右边
labels : {
style : {
color : 'blue'//y轴文字颜色
}
},
gridLineWidth : 1,
gridLineDashStyle : 'ShortDash',
gridLineColor : '#ddd',
}
],
tooltip: {
//headerFormat : '<span>{series.name}</span><br>',//若是设置这个的话，就是更改悬浮框的标题，
//就是前面纠结的悬浮框里面那个横坐标的问题，但是这里不能设置成横坐标的原因是：
//这里可用的变量比较少，主要是point 和series对象的属性，比如 point.key，series.name，series.color。
//所以最后还是改变series里面的data。
shared: true,//多个一起显示
crosshairs: true,//出现一条竖线
},
series: [{
name: '女生比率',
data: [['2018-06-25',29],['2018-06-26',30],['2018-06-27',31]],
color: 'yellow',//线的颜色
visible : true,//初始化的时候 是否显示
yAxis: 0,//用第1条y轴
tooltip: {
valuePrefix: '比率：',
valueSuffix: '%'
},
},{
name: '医生数量',
data: [['2018-06-25',28],['2018-06-26',35],['2018-06-27',30]],
color: 'green',
visible : true,
yAxis: 1,//用第2条y轴
}],
});
image.png
图例 legend：
legend: {
align: 'left',
verticalAlign: 'top',
x : 10,//偏移量
borderWidth: 1
},
image.png
点击事件 plotOptions：
默认的是显示和隐藏相关的折线，用return false可以取消这个事件。
plotOptions : {
series : {
events : {
// 图例点击事件
legendItemClick: function(event) {
return false;//点击就没效果了，不会显示和隐藏了
}
}
}
}
在这里面我们可以做很多事情，我们可以更新y轴的文字颜色，更新series里面的数据，比如用哪条y轴等等。
更新都是用update方法，显示隐藏series里面的数据，用hide()/show();等等
legendItemClick: function(event) {
chart.yAxis[0].update({
labels : {
style : {
color : '#000'
},
formatter: function () {
return this.value;
}
},
});
return false;//我放这个是因为我数据较少，不想让唯一的两条数据隐藏一条
}
legendItemClick: function(event) {
//chart.series[0].hide();//可以让第一条数据隐藏
chart.series[this.index].update({
yAxis : 1
});
return false;
}
具体查看官网里面的方法，里面说的很详细：
image.png
