如何使用HighCharts库实现此目的

编程问答 2022-10-25

问题描述

我对Highcharts很陌生。我正在开发仪表板，并且需要在工厂中创建一定百分比的设备使用率。我检查了Highcharts提供的所有演示，但没有找到类似的演示。

这就是我需要的。

enter image description here

我知道我可以从头开始，但是我更愿意使用Highcharts。

解决方法

我使用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]
  }]
});
highchartshtmljavascript