javascript - 如何在条形的中间/中心对齐线标记- Highcharts

线标记必须在条中居中。

随附工作片段供参考

Highcharts.chart('container', {
          chart: {
            zoomType: 'false',
            height: '274px'
          },
          title: {
            text: ''
          },
          colors: ['#f47a42', '#f4418c', '#028fcf', '#000000', '#f39200'],
          subtitle: {
            text: ''
          },
          xAxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            crosshair: true,
            min: 0,
          },
          yAxis: {
            min: 0,
            title: {
              text: ''
            }
          },
          tooltip: {},
          plotOptions: {
            column: {
              pointPadding: 0,
              borderWidth: 0
            }
          },
          series: [{
            type: 'column',
            name: 'XYZ',
            data: [346, 336, 436, 504, 740, 902, 735, 815, 866, 763, 742, 496],
            events: {
              legendItemClick: function (event) {
                this.visible ?
                  this.chart.get('XYZ').hide() :
                  this.chart.get('XYZ').show();
              }
            }

          }, {
            showInLegend: false,
            type: 'line',
            name: 'XYZ',
            id: 'XYZ',
            data: [346, 336, 436, 504, 740, 902, 735, 815, 866, 763, 742, 496]

          }, {
            type: 'column',
            name: ' ABC',
            data: [250, 311, 457, 571, 701, 716, 760, 815, 876],
            events: {
              legendItemClick: function (event) {
                this.visible ?
                  this.chart.get('ABC').hide() :
                  this.chart.get('ABC').show();
              }
            }

          }, {
            showInLegend: false,
            type: 'line',
            name: 'ABC',
            id: 'ABC',
            data: [250, 311, 457, 571, 701, 716, 760, 815, 876]

          }
          ],
          credits: {
            enabled: false
          },
        });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

最佳答案

您可以在'line'系列上为pointPlacement属性设置正确的值：

series: [{
    type: 'column',
    name: 'XYZ',
    data: [346, 336, 436, 504, 740, 902, 735, 815, 866, 763, 742, 496],
    events: {
        legendItemClick: function(event) {
            if (this.visible) {
                this.chart.get('XYZ').hide();
                this.chart.get('ABC').update({
                    pointPlacement: 0
                }, false);
            } else {
                this.chart.get('ABC').update({
                    pointPlacement: 0.15
                }, false);
                this.chart.get('XYZ').show();
            }
        }
    }

}, {
    showInLegend: false,
    pointPlacement: -0.15,
    type: 'line',
    name: 'XYZ',
    id: 'XYZ',
    data: [346, 336, 436, 504, 740, 902, 735, 815, 866, 763, 742, 496]

}, {
    type: 'column',
    name: ' ABC',
    data: [250, 311, 457, 571, 701, 716, 760, 815, 876],
    events: {
        legendItemClick: function(event) {
            if (this.visible) {
                this.chart.get('ABC').hide();
                this.chart.get('XYZ').update({
                    pointPlacement: 0
                }, false);
            } else {
                this.chart.get('XYZ').update({
                    pointPlacement: -0.15
                }, false);
                this.chart.get('ABC').show();
            }
        }
    }
}, {
    showInLegend: false,
    pointPlacement: 0.15,
    type: 'line',
    name: 'ABC',
    id: 'ABC',
    data: [250, 311, 457, 571, 701, 716, 760, 815, 876]
}],

现场演示：http://jsfiddle.net/BlackLabel/08efmc49/

关于javascript - 如何在条形的中间/中心对齐线标记- Highcharts ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52648419/