码上敲享录 > 最全面的HTML入门教程 > Highcharts的spline简单例子

Highcharts的spline简单例子

上一章章节目录下一章 2018-08-22已有807人阅读 评论(0)

Highcharts的spline简单例子


解决方法:

以精确到秒的时间毫秒数为x轴,进场人数为y轴,来生成平滑曲线spline,以5个点示例

1.标签

<div id="container" style="min-width:400px; height:230px;"></div>


2.生成Highcharts代码,container是标签的id

var chart;

$(function(){

Highcharts.setOptions({

global: {

useUTC: false

}

})

var json = [{"marker":{"symbol":"circle"},"name":"进场人数","data":

[{"y":0,"x":1534879905000},{"y":50,"x":1534880025000},{"y":0,"x":1534880145000},

{"y":0,"x":1534880265000},{"y":20,"x":1534880385000}]}];

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'spline',

marginTop: 28,

marginBottom: 50,

marginLeft: 81,

marginRight: 4

},

legend: {

align: 'center',

verticalAlign: 'bottom',

x: 10,

y: 14,

floating: true

},

title: {

text: '进场人数',

margin: 2,

style: {

fontSize: '13px',

color: '#fff'

}

},

colors: ["#B03060"],

xAxis: {

type: 'datetime',

labels: {

style: {

fontSize: '13px',

color: '#333'

},

formatter: function(){

return Highcharts.dateFormat('%H:%M:%S', this.value);//


格式化x轴时间格式

}

},

},

yAxis: {

  title: {

align: 'high',

offset: 0,

text: '进场人数(个)',

rotation: 0,

x: 51,

y: -16,

style: {

fontSize: '13px',

color: '#999'

}

},

labels: {

format: '{value}',

style: {

fontSize: '13px',

color: '#333'

}

},

minorTickInterval: 25,

lineWidth: 1,

tickWidth: 1,

gridLineColor: '#e8e8e8'

},

tooltip: {

backgroundColor: 'rgba(0, 0, 0, 0.85)',

style: {

color: '#F0F0F0'

},

borderRadius: 15,

headerFormat: '<span style="font-size:16px">{point.key}</span><table>',

pointFormat: '<tr><td style="font-size:13px;color:


{series.color};padding:0">{series.name}: </td>' +

'<td style="font-size:13px; padding:0">{point.y:.0f} 个</td></tr>',

footerFormat: '</table>',

shared: true,

useHTML: true

},

plotOptions: {

spline: {

lineWidth: 1,

states: {

hover: {

lineWidth: 1

}

},

marker: {

enabled: false

}

}

},

series: json

});

});


本文链接:http://www.yayihouse.com/yayishuwu/chapter/1519



Activiti工作流实战教程:https://xiaozhuanlan.com/activiti
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交