1. 程式人生 > 實用技巧 >highcharts中的折線圖

highcharts中的折線圖

折現圖表的樣式如下所示:

整體的一個設定程式碼如下:

that.options = {
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    yAxis: {
        title: {
            text: null
        },
        gridLineColor: '#29304d',
        // y軸的網格線
        lineColor: '#29304d',
        // y軸的豎線
        lineWidth: that.torem(2),
        
// 要加上線寬才可以出來 labels: { // y軸的文字 style: { color: '#fff', fontSize: that.torem(28) } } }, xAxis: { alternateGridColor: '#152e55', // 隔行變色 lineColor: '#29304d', labels: { // x軸的文字 style: { color:
'#fff', fontSize: that.torem(28) } }, tickWidth: 0, // 去掉刻度線 categories: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'] // x軸的資料 }, chart: { backgroundColor: 'transparent', color: '#fff' }, legend: { // 圖例的設定 layout: 'horizontal',
// 水平排列 align: 'right', // 右對齊 verticalAlign: 'top', // 縱向位於上方 padding: 0, itemStyle: { color: '#fff', fontSize: that.torem(28) }, symbolHeight: that.torem(96), symbolWidth: that.torem(48), symbolRadius: that.torem(24) }, plotOptions: { series: { // label: { // connectorAllowed: false // }, marker: { // 折線圖中的點設定,預設是原形,三角和正方形 // fillColor: '#FFFFFF', lineWidth: that.torem(2), lineColor: '#fff', // inherit from series width: that.torem(80), height: that.torem(80), symbol: 'circle', // circle會取消預設設定,所有的折線上的點都變成circle radius: that.torem(8) }, lineWidth: that.torem(8) } }, colors: ['#296efe', '#13c792', '#dba630'], // 折線的顏色 series: seriesArr };

y軸的gridLineColor 設定的顏色

y軸的lineColor 設定的顏色

x軸的背景alternateGridColor隔行變色

x軸的刻度線tickWidth 如果不想要,值就設定成0