hightcharts柱狀圖怎么實(shí)現(xiàn)

本文小編為大家詳細(xì)介紹“hightcharts柱狀圖怎么實(shí)現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“hightcharts柱狀圖怎么實(shí)現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

    Highcharts.chart('container',{

    chart:{

    type:'variwide'//varwide依賴varwide.js

    },

    title:{

    text:'機(jī)器狀態(tài)圖'

    },

    subtitle:{

    text:'數(shù)據(jù)來源：eurostat'

    },

    xAxis:{

    categories:[

    '2018-09-01',

    '2018-09-02',

    '2018-09-03',

    '2018-09-01',

    '2018-09-02',

    '2018-09-03',

    '2018-09-01',

    '2018-09-02',

    '2018-09-03',

    '2018-09-01',

    '2018-09-02',

    '2018-09-03',

    '2018-09-04'

    ],

    crosshair:true

    },

    legend:{

    enabled:true

    },

    series:[{

    data:[

    ['正常',1,2122],

    ['調(diào)機(jī)',1,2311],

    ['待機(jī)',1,1111],

    ['正常',1,122],

    ['調(diào)機(jī)',1,2311],

    ['待機(jī)',1,1111],

    ['正常',1,122],

    ['調(diào)機(jī)',1,2311],

    ['待機(jī)',1,1111],

    ['正常',1,2122],

    ['調(diào)機(jī)',1,2311],

    ['待機(jī)',1,1111],

    ['修模',1,3212]

    ],

    colors:['#26B99A','#E74C3C','#FFFF37','#26B99A','#E74C3C','#FFFF37','#26B99A','#E74C3C','#FFFF37','#26B99A','#E74C3C','#FFFF37','#FFE4C4'],

    colorByPoint:true,

    }]

    });

讀到這里，這篇“hightcharts柱狀圖怎么實(shí)現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。