Highcharts是否可以为每个系列添加工具提示格式化程序？

Question

我正在使用highcharts来显示平均值和最小/最大(面积)值，类似于演示http://www.highcharts.com/demo/arearange-line，所有这些都很难，而不仅仅是温度，还使用复选框来选择ph或flow。

例如，ph change事件将使用新系列进行重绘。

dlgElement.find('#ph').on("change", function (e) {
    e.preventDefault();
    propertyType = 'PH';
    propertyAvgItems = getItems(items, propertyType, ["startDate", "averageValue"]);
    propertyMinMaxItems = getItems(items, propertyType, ["startDate", "minValue", "maxValue"]);
    chart.series[0].update({ id: 'series-5', name: 'pH avg.', data: propertyAvgItems});
    chart.series[1].update({ id: 'series-6', name: 'pH min/max', data: propertyMinMaxItems });
    chart.redraw();
});

我想为每个系列显示一个工具提示，到目前为止，我只能创建一个并检查每个系列，如下所示：

   tooltip: {
        crosshairs: true,
        enabled: true,
        shared: true,
        formatter: function () {

            var value;
            var propertyUnit;
            var seriesName = this.points[0].series.name;

            if (seriesName == 'Flow') {
                propertyUnit = 'l/s';
            } else if (seriesName == 'Temperature') {
                propertyUnit = String.fromCharCode(186) + "C";
            } else if (seriesName == 'pH') {
                propertyUnit = 'pH';
            }

            if(this.point in this){
                value = this.point.low + " " + propertyUnit + " " + this.point.high + + " " + propertyUnit;
            } else {
                value = this.y;
            }

            return seriesName + " > " + Highcharts.dateFormat('%e-%b-%Y', new Date(this.x)) + " :  " + value + " " + propertyUnit;
        }
    },

如何获取区域的边界，是否可以使用Highcharts更新按系列动态添加工具提示？而不是使用全局工具提示并检查系列？

谢谢你的建议！

Answer 1

不幸是没有，所以您需要使用单个全局格式化程序，然后添加将返回每个特定系列的工具提示的条件。

Answer 2

好吧，我决定对每个系列使用tooltip/pointformat：

dlgElement.find('#flow').on("change", function (e) {
    e.preventDefault();
    propertyType = 'FLOW';
    propertyAvgItems = getItems(items, propertyType, ["startDate", "averageValue"]);
    propertyMinMaxItems = getItems(items, propertyType, ["startDate", "minValue", "maxValue"]);
    chart.series[0].update({ id: 'series-1', name: 'Flow avg.', data: propertyAvgItems, tooltip: { pointFormat: '{point.y} l/s<br/>' }});
    chart.series[1].update({ id: 'series-2', name: 'Flow min/max', data: propertyMinMaxItems, tooltip: { pointFormat: '{point.y} l/s<br/>' } });
    chart.redraw();
});

dlgElement.find('#temperature').on("change", function (e) {
    e.preventDefault();
    propertyType = 'TEMPERATURE';
    propertyAvgItems = getItems(items, propertyType, ["startDate", "averageValue"]);
    propertyMinMaxItems = getItems(items, propertyType, ["startDate", "minValue", "maxValue"]);
    chart.series[0].update({ id: 'series-3', name: 'Temperature avg.', data: propertyAvgItems, tooltip: { pointFormat: '{point.y}' + String.fromCharCode(186) + 'C<br/>' }});
    chart.series[1].update({ id: 'series-4', name: 'Temperature min/max', data: propertyMinMaxItems, tooltip: { pointFormat: '{point.y}' + String.fromCharCode(186) + 'C<br/>' }});
    chart.redraw();
});