如何使用 HighCharts 庫來實現這一點

Question

我對Highcharts很陌生。 我正在開發儀表板，我需要創建工廠設備的使用百分比。 我檢查了Highcharts提供的所有演示，但沒有找到類似的演示。

這是我需要的。

我知道我可以從頭開始，但如果可能的話，我更喜歡使用Highcharts 。

Answer 1

我准備了一個使用stacked bar的演示，這可能是您創建與共享圖片中相同的圖表的良好起點。

演示： https://jsfiddle.net/BlackLabel/qum72ejL/

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },

  yAxis: {
    min: 0,
    max: 100
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        format: '{y} %'
      }
    }
  },
  series: [{
    name: 'Other',
    data: [11]
  }, {
    name: 'Dust Collection',
    data: [26]
  }, {
    name: 'Compressed Air',
    data: [17]
  }, {
    name: 'Vacuum System',
    data: [34]
  }, {
    name: 'Chillers',
    data: [12]
  }]
});