目前只整理了area的处理
html部分
<div id="container"></div>
js部分
window.onload = function(){
highcharts()
}
function highcharts(){
postDate('http://xxxxxx/api/index/price_line','','POST',function(data){
var res = data.data;
console.log(res);
if(data.code==200){
var h_date = res.date;//服务器获取到的x轴的时间
var h_data = res.price;//服务器获取到的Y轴的对应价格
$('#container').highcharts({
chart: {
backgroundColor: 'rgba(49,50,61,1)',//背景颜色
borderWidth: 1,//设置图表边框宽度
borderColor:'rgba(255,255,255,1)',//边框颜色
type: 'area'
},
title: {
text: null
},
ubtitle: {text: null},
xAxis: {
gridLineWidth:'0.5px',//设置X轴线条宽度
categories: h_date,//x轴显示的时间
gridLineColor:'rgba(255,255,255,1)',//x轴线条颜色
labels : {
style : {
'fontSize' : '8px',//x轴文字的大小
'color':'#ffffff',
}
},
tickmarkPlacement:'on'//刻度和文字对齐 不设置默认不对齐
},
yAxis: {
gridLineWidth:'0px',
title:{text:''},
opposite:true //把y轴放在右边 不设置默认放左边
},
tooltip: {//点击圆点后的提示框,不设置就显示全部
// enabled: true,
// formatter: function() {return '<b>'+ this.series.name +'</b><br/>';}
},
plotOptions: {
area: {
fillOpacity: 0.3, // 指定所有面积图的透明度
color:'#FF9C1A',
marker: {
enabled: true,
symbol: 'circle',//圆点的样式
radius: 3,
fillColor:'#fba845'
},
dataLabels: {},
enableMouseTracking: true
},
pointStart: 2010//设置x轴开始的时间
},
series: [{
name:'当前价格',
data:h_data,
showInLegend: false //不显示底部文字提示框
}]
});
}
})
}
```