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

Change chart subtitle programmatically

本文关键字：副标题 编程 方式更      更新时间：2023-09-26

也许不是最好的标题，但我试图做的是更改图表的副标题以包含其中显示的最后温度。像这样的东西

最后值：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;
      }
},

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

您可以使用函数 （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);
        }
    }
}
相关文章：