highcharts数据标签重叠plotlines值

我有一个图表与列和行。我使用绘图线为曲线图添加了平均线。highcharts数据标签重叠plotlines值

我的问题是该行的数据标签与图形文本重叠。我在这里再现了错误（请参阅最后一个数据标签）。：http://jsfiddle.net/cs8bqumy/

我可以在最后一列之后添加一些填充来纠正这个问题吗？

$(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 (AED)</span>', 
         useHTML: true, 
         style: { 
          color: '#89A54E' 
         } 
        }, 
        min: 0, 
        max: 190234 
       } 
       , { // Secondary yAxis (Margin %) 
        title: { 
         text: '<span class="axis-label">Margin</span>', 
         useHTML: true 
        }, 
        labels: { 
         format: '{value}%' 
        }, 
        opposite: true, 
        min: 0, 
        max: 22, 
        alignTicks: false, 
        gridLineWidth: 0, 
        plotLines : [{ 
         value : 11.66000, 
         color : 'red', 
         dashStyle : 'shortdash', 
         width : 2, 
         label : { 
          text : '11.66%', 
          align: 'right', 
          style: { 
           color: 'red' 
          } 
         } 
        }] 
       } 
       ], 
       tooltip: { 
        shared: true 
       }, 
       legend: { 
        enabled: false 
       }, 
       credits: { enabled: false }, 
       plotOptions: { 
        series: { pointWidth: 25 }, 
        column: { colorByPoint: true }, 
        line: { 
         dataLabels: { 
          enabled: true, 
          format: '{y}%', 
          style: { 
           fontWeight: 'bold', 
           color: '#000000', 
          } 
          //style: 'background-color:rgba(255,0,0,0.5);' 
          //backgroundColor: '#FEFEFE', 
          //shadow: true 
         } 
        } 
       }, 
       series: [{ 
        name: 'Sales Value', 
        color: '#FFA500', 
        type: 'column', 
        data: [104833.6400,38023.0500,53165.2200,21674.0000,37098.4700,42679.6700,23127.3300,34588.5000,33380.0000,15453.0000], 
        tooltip: { 
         valuePrefix: 'AED' 
        } 
       } 
       , { 
        name: 'Margin After Discount (%)', 
        color: 'lightblue', 
        yAxis: 1, 
        data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,11.90], 
        tooltip: { valueSuffix: '%' } 
       } 
       ] 
      }); 
     });

来源

2014-10-29 jagdipa

您还可以设置max值即作为9.3。

http://jsfiddle.net/cs8bqumy/2/

来源

2014-10-30 13:31:18

这正是我一直在寻找。我唯一的问题是我刚刚花了半天的时间来编写捕获最后x值的代码，并且如果它靠近剧情线，它会重新定位值。 – jagdipa 2014-10-30 13:48:48

Highcharts允许您修改数据数组中各个数据标签的位置。在你的榜样，你会做的是像这样：

data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,{y:11.90, dataLabels: {y:-8}}],

这是在API中：http://api.highcharts.com/highcharts#series.data.dataLabels

虽然这可能是最好的移动你的plotline标签的下面那条线。在你的例子中，将y：20添加到plotLines [0] [label]。

在API：http://api.highcharts.com/highcharts#xAxis.plotLines.label.x

来源

2014-10-29 18:35:54

正如亚当的答案，你可以去和现在的位置是最后一个点的datalabel提及。

而不是数据标签我建议您定位plotLine的标签。

您可以使用，y位置属性x和对准它向左

label: { 
    x: -50, 
    y: 10 
}

这将是最好的解决办法，如果你的情节线将不会与Y轴网格线重叠控制它。

这里更新fiddle

来源

2014-10-30 06:23:07 Strikers

highcharts数据标签重叠plotlines值

回答

相关问题