highcharts设置总结
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
曲线上方不需要显示文字可以注释掉这个
<!--<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>-->
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="max-width:800px;height:400px"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: { //标题，如不需要可以置空
text: ''
},
subtitle: { //副标题
text: ''
},
xAxis: {
labels: {
enabled: false //是否显示x轴的标签
},
type: 'datetime', //如果x轴是时间，设置该项可以进行格式转换
},
yAxis: {
title: {
text: '' //y轴标题
},
labels: {
enabled: false //是否显示y轴的标签
}
},
legend: { //图例设置
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
width:0,
enabled: false, //是否显示
},
navigation:{ //导航，下载保存为图片的地方
buttonOptions:{
enabled:false
}
},
credits:{
enabled:false //版权信息是否显示
},
tooltip:{ //数据提示框
backgroundColor:'#FFFFFF',
borderColor:'#cccccc',
shared: true,
useHTML: true,
formatter:function() { //通过该方法可以返回自定义的提示内容，要同时设置上面两项
var points = this.points;
var _time = this.x;
//时间格式化
_time = new Date(_time);
var year = _time.getFullYear();
var month = _time.getMonth()+1;
var date = _time.getDate();
year = year.toString().substr(2,2);
var str_time = [date,month,year].join('/');
var header = '<b style="margin:10px 0;display:block;font-weight:700">'+ str_time +'</b><table>';
var body = '';
var footer = '</table>';
for(var i=0;i<points.length;i++){
var _color = points[i].series.color;
var _y = points[i].y;
var _name = points[i].series.name;
//单独给某一项设置百分比显示
if(points[i].series.name == "CTR"){
body+= '<tr><td style="width:30px;height:1px;background:'+ _color +';display:inline-block;margin-right:10px"></td><td style="color:'+ _color +'">'+ _name +': </td><td style="text-align: left"><b id="point_name">'+ _y +'%</b></td></tr>';
} else {
body+= '<tr><td style="width:30px;height:1px;background:'+ _color +';display:inline-block;margin-right:10px"></td><td style="color:'+ _color +'">'+ _name +': </td><td style="text-align: left"><b id="point_name">'+ _y +'</b></td></tr>';
}
}
return header+body+footer;
},
xDateFormat: '%d/%m/%Y',
},
plotOptions: {
series: { //设置标记点的样式
label: {
connectorAllowed: false
},
marker:{
enabled:false,
symbol:'circle', //这里可以设置数据点的全局样式，统一为某一种
radius:5,
},
negativeColor:'#fff',
allowPointSelect:false,
cursor: 'pointer',
states:{
hover:{
halo:'false' //这里设置鼠标移到数据点上时数据点不显示外层圆圈
}
},
//处理x轴的时间格式，要配合xAxis下面的type:'datetime'使用
pointStart: Date.UTC(2017, 0, 1),
pointInterval: 24 * 3600 * 1000,
}
},
series: [{ //设置相关数据及其他信息
name: 'Clicks',
data: [13, 22, 27, 21, 22, 35, 41, 41,21],
color:'#4d90fe',
}, {
name: 'Impressions',
data: [24, 24, 29, 20, 32, 30, 38, 40,32],
color:'#dd4b39'
}, {
name: 'CTR',
data: [11.23, 17.34, 16.12, 19.43, 20.54, 24.65, 28.34, 30.32,42.54],
color:'#ff9900'
}, {
name: 'Position',
data: [29, 31, 39, 12, 15, 22, 34, 39,28],
color:'#109618'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
</html>