highcharts条形图上的内部线条

我有一个条形图，包含当前和上一年各个供应商的值。在xAxis的对面，我有一个保证金值。我可以解释一下，我想用下面的例子更好：highcharts条形图上的内部线条

这里发生的事情是，我也有保证金当前和以前的值。所以线图使xAxis增加了一倍。我想要的是，对于每个xAxis值，应该有一个包含两个值的单行。那么，让我们以A列为例。我希望： - 当年年度栏显示本年度保证金的点数 - A点上一年的栏显示上一年的保证金 - 加入两条线的 - 此行不应继续其他xAxis系列。 - 每个xAxis应该有自己的行，如上所述。

我希望我已经解释清楚了。

下面是代码：

$(function() { 
      $('#container').highcharts({ 
       chart: { 
        //zoomType: 'xy', 
        height: 400 
       }, 
       title: { 
        text: null 
       }, 
       xAxis: [{ // Suppier names xAxis 
        categories: ['A','B','C','D','E','F','G','H','I','J'], 
        labels: { rotation: -90 } 
       }], 
       yAxis: [{ // Primary yAxis (Sales) 
        title: { 
         text: '<span class="axis-label">Sales Value (£)</span>', 
         useHTML: true, 
         style: { 
          color: '#89A54E' 
         } 
        }, 
        min: 0, 
        } 
       , { // Secondary yAxis (Margin %) 
        title: { 
         text: '<span class="axis-label">Margin</span>', 
         useHTML: true 
        }, 
        labels: { 
         format: '{value}%' 
        }, 
        opposite: true, 
        min: 0, 
        alignTicks: false, 
        gridLineWidth: 0 
       } 
       ], 
       tooltip: { 
        shared: true 
       }, 
       legend: { 
        enabled: true 
       }, 
       credits: { enabled: false }, 
       plotOptions: { 
        //series: { pointWidth: 25 }, 
        //column: { 
        // pointPadding: 0.5, 
        // borderWidth: 0 
        //}, 
        line: { 
         dataLabels: { 
          enabled: true, 
          format: '{y}%', 
          style: { 
           fontWeight: 'bold', 
           color: '#000000', 
          } 
         } 
        } 
       }, 
       series: [{ 
        name: 'Current Year', 
        color: '#FFA500', 
        type: 'column', 
        data: [104833.6400,38023.0500,49932.5400,21674.0000,37098.4700,42679.6700,29142.4800,34488.8000,33380.0000,15453.0000], 
        tooltip: { 
         valuePrefix: '£' 
        } 
       }, { 
        name: 'Previous Year', 
        color: '#5882FA', 
        type: 'column', 
        data: [190233.6800,52147.4200,39609.5700,62502.0000,44805.4400,39057.4800,36631.0000,24868.9000,17111.6800,18819.7000], 
        tooltip: { 
         valuePrefix: '£' 
        } 
       }, { 
        name: 'Margin', 
        type: 'spline', 
        yAxis: 1, 
        data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] 
       }] 
      }); 
     });

编辑：

好了 - 所以这个例子说明什么，我试图做的： http://jsfiddle.net/0m3208qj/4/。您可以在列B中看到该行。我的问题是它显示在中心，我希望在相关列中显示它。

来源

2014-10-31 jagdipa

您可以尝试使用pointPlacement作为线路系列，并通过为此参数设置任何数值来移动它。

来源

2014-11-03 12:35:01

highcharts条形图上的内部线条

回答

相关问题