javascript - 以编程方式更改图表副标题

Question

也许不是最好的标题，但我想做的是更改图表的副标题，以包括其中显示的最后一个温度。像这样

最后一个值:4 度

图表的数据在 csv 文件中。

$(document).ready(function () {
    var lastVal = 0;
    $.get('csv/Temp.csv', function (csv) {
        $('#Temp').highcharts({
            chart: {
                type: 'spline',
                zoomType: 'xy'
            },
            data: {
                csv: csv
            },
            title: {
                text: 'Outside Temperature'
            },
            subtitle: {
                text: 'Last value: '
            },
            yAxis: {
                title: {
                    text: 'Units'
                }
            }
        });
    });
});

如果我将副标题更改为:

subtitle: {
      text: function () {
          lastVal = this.yData[this.yData.length - 1];
          return 'Last Value: ' + lastVal;
      }
},

我只得到文本。我该怎么做？

Answer 1

您可以使用函数 (API) 以编程方式更改图表副标题:

chart.setTitle(Object title, object subtitle, Boolean redraw)

一个例子是:

chart.setTitle(null, { text: "New subtitle" }, true);

如果您希望在加载来自 CSV 的数据时发生这种情况，您可以这样做(JSFiddle):

chart: {
    events: {
        load: function(event) {
            var lastValue = this.series[0].data[this.series[0].data.length-1].y;
            this.setTitle(null,{ text: 'Last y-value: '+lastValue }, true);
        }
    }
}