如何在Highcharts中顯示Bar的剩餘百分比？

我想顯示爲灰色像這樣的酒吧在圖像的剩餘百分比如何在Highcharts中顯示Bar的剩餘百分比？

到目前爲止，我已經嘗試了這一點，並不能找到這種類型的Highcharts文檔中所以請告訴我，我應該怎麼解決這個與highcharts文檔或jquery的

Highcharts.chart('Chart1Progress', { 
    chart: { 
     type: 'bar', 
     backgroundColor: null 
    }, 
    title: null, 
    xAxis: { 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], 
     visible: false, 
     shadow: true 
    }, 
    yAxis: { 
     min: 0, 
     title: null, 
     stackLabels: { 
      enabled: true, 
      style: { 
       fontWeight: 'bold', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' 
      } 
     }, 

    }, 
    legend: { 
     enabled: false, 
     align: 'right', 
     x: -30, 
     verticalAlign: 'top', 
     y: 25, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black', 
     borderColor: '#CCC', 
     borderWidth: 1, 
     shadow: true 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: false, 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
      } 
     } 
    }, 
    series: [{ 
     name: 'John', 
     data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }] 
    }] 
});

http://jsfiddle.net/at8m1r24/

來源

2017-05-25 Mussaib Siddiqui

我不確定你可以用api。但你可以用css「繪製」線條（在圖表下面創建'div'）。或者，您可以使用javascript將SVG行添加到Highchart創建的SVG。 –

最簡單的方法是添加第二個系列，將其計算爲現有系列點和最大值的增量，然後將該系列的顏色設置爲所需的灰色。 – jlbriggs

Highcharts.chart('Chart1Progress',{ 
 
     chart: { 
 
      type: 'bar', 
 
      backgroundColor: null, 
 
     }, 
 
     title: { 
 
      text: null, 
 
     }, 
 
     xAxis: { 
 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], 
 
     visible: false, 
 
     }, 
 
     yAxis: { 
 
     min: 0, 
 
     title: null, 
 
     stackLabels: { 
 
      enabled: true, 
 
      style: { 
 
       fontWeight: 'bold', 
 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' 
 
      } 
 
     }, 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       stacking: 'percent' 
 
      }, 
 
      bar: { 
 
       grouping: false, 
 
       dataLabels: { 
 
        enabled: false 
 
       } 
 
      } 
 
     }, 
 
     legend: { 
 
      enabled: false, 
 
      align: 'right', 
 
      verticalAlign: 'top', 
 
      x: -30, 
 
      y: 25, 
 
      floating: true, 
 
     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'black', 
 
     borderColor: '#CCC', 
 
     borderWidth: 1, 
 
     shadow: true 
 
     }, 
 
     series: [ { 
 
      name: 'Remaining', 
 
      data: [3, 5, 4, 1, 6], 
 
      borderWidth: 0, 
 
      color: "rgba(0,0,0,0)" 
 
     },{ 
 
      name: 'Remaining', 
 
      data: [3, 5, 4, 1, 6], 
 
      borderWidth: 0, 
 
      stack: 1, 
 
      animation: false, 
 
      color: "gray" 
 
     }, { 
 
     name: 'John', 
 
     data: [{ y: 5, color: 'red' }, { y: 3, color: '#DDDF0D' }, { y: 4, color: '#55BF3B' }, { y: 7, color: '#5dacdf' }, { y: 2, color: 'pink' }] 
 
    }] 
 
     
 
    });

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="Chart1Progress" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

你應該設置堆棧百分比和很少的數據堆棧

來源

2017-05-25 08:36:18

如何在Highcharts中顯示Bar的剩餘百分比？

回答

相關問題