Highcharts基本折线图-Y轴标签名称

时间:2020-03-13 06:03:02

标签: highcharts

Highcharts基本折线图,Y轴标签如何显示?

这是我的代码

  var seriesData = [["O", 42], ["N", 35], ["D", 20], ["J", 47], ["F", 45], ["M", 65]];
            var seriesDataY = [['O', 50], ['14', 22], ["D", 30], ["J", 42], ["F", 44], ["M", 65]];

            Highcharts.chart('linechart', {
                title: {
                    text: ' '
                },

                yAxis: {
                    title: {
                        text: '(6 mth period)'
                    },

                    labels: {
                        enabled: true,
                        formatter: function () { return seriesDataY[0][this.value]; },
                    }

                },


                xAxis: {
                    tickInterval: 1,
                    labels: {
                        enabled: true,
                        formatter: function () { return seriesData[this.value][0]; },
                    }
                },

                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },

                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 0
                    }
                },

                series: [{
                    name: 'Voluntary',
                    data: seriesData 
                }, {
                    name: 'Involuntary',
                    data: seriesDataY
                    //data: [null, null, 7988, 12169, 15112, 22452]
                }],


                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }

            });

所附图片:

enter image description here

缺少Y轴标签:

0,14,28,42,56,70

根据上述值,我需要显示Y轴。显示Y轴标签名称的选项是什么?

1 个答案:

答案 0 :(得分:0)

请注意,yAxis从数据y数字中获取值(this.value)。这就是为什么它与xAxis不同的原因。另外,请注意,yAxis的标签数量计算方法不同,因此必须进行设置。

我认为这样的事情应该符合您的要求:

let i = 0;

Highcharts.chart('container', {
  title: {
    text: ' '
  },
...
  labels: {
   enabled: true,
   formatter: function() {

     i++;
     return seriesDataY[i - 1][0];
   },
 }
...

演示:https://jsfiddle.net/BlackLabel/zsou1Lye/