Question

我有以下高图：

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'scatter',
                    zoomType: 'xy'
                },
                title: { text: 'Report' },
                xAxis: { title: { enabled: true, text: 'Score' },
                    startOnTick: true, endOnTick: true, showLastLabel: true, min: -10, max: 11 },
                yAxis: { title: { text: 'Question', align: 'left' }, min: 0, max: 27, reversed: true, categories: categories, labels: {enabled: true}},
                tooltip: { formatter: function() { return '' + this.x +' score'; } },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 320,
                    y: 35,
                    floating: true,
                    backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
                    borderWidth: 1,
                    width: 200,
                    height: 200
                },
                plotOptions: {
                    linewidth: 10,
                    series: {
                        shadow: true,
                        dataLabels: {
                            enabled: true,
                            align: 'center',
                            verticalAlign: 'bottom',
                            rotate: 0,
                            formatter: function() {
                                return '<b style="color:gray">' + this.point.x + '</b>';
                            },
                            style: {
                                     color: '#000',
                                     font: 'bold 18px "Trebuchet MS", Verdana, sans-serif;'
                                  },
                            x:-25,
                            y:7
                        }
                    },
                    scatter: {
                        marker: {
                            enable: false,
                            radius: 15,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        }
                    }
                },
                series: [{
                    id:'def',
                    name: 'def',
                    color: 'rgba(223, 83, 83, .5)',
                    data: [[10,2],[9,3],[9,4],[5,5],[6,6],[7,7],[9,8],[8,9],[9,11],[7,12],[6,13],[8,14],[7,15],[8,16],[6,18],[8,19],[9,20],[7,22],[6,23],[9,25],[9,26]]

                }, {
                    id:'abc',
                    name: 'abc',
                    color: 'rgba(119, 152, 191, .5)',
                    data: [[6,2],[3.5,3],[7.5,4],[9,5],[3.5,6],[5,7],[9,8],[5,9],[8.5,11],[8.5,12],[8.5,13],[-1,14],[10,15],[8,16],[7.5,18],[7,19],[7,20],[5,22],[8,23],[7,25],[6.5,26]]

                }]
            });

我想为数据标签设置不同的样式，因此abc向左拉（使用x参数），def拉到右边。

目前它已全球设定。

如果我尝试：

            chart.series[1].options.dataLabels.x=25;
            chart.redraw()

没有任何反应，datalabel是相同的。

关于如何做到这一点的任何想法？

Answer 1

您可以为每个系列设置数据标签的格式，如下例所示：

<击> Setting series-level data label options

$(function () {
$('#container').highcharts({

    chart: {
        marginRight: 50
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {
            dataLabels: {
                enabled: true,
                align: 'left',
                crop: false,
                style: {
                    fontWeight: 'bold'
                },
                x: 3,
                verticalAlign: 'middle'
            },
            y: 54.4
        }]
    }]

});
});

Answer 2

我知道答案为时已晚，但对其他人有帮助。

您可以通过定义每个系列的数据标签的x值来实现。

以下是JS Fiddle： -

data: [{
  color: Highcharts.getOptions().colors[0],
  y: 100,
  name:'A',
  yAxis: 0,
  dataLabels: {
    enabled: true,
    style: {
        fontWeight: 'bold'
    },
    x: 60,
  },
},
{
  ...
}
]

Highcharts每个系列分开数据标签

2 个答案: