如何在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的剩余百分比？

回答

相关问题