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

时间:2015-03-13 10:14:24

标签: javascript highcharts

我使用highcharts显示类似于demo http://www.highcharts.com/demo/arearange-line的平均值和最小值/最大值(arearange)值,而不仅仅是温度im也使用复选框来选择ph或flow。

因此,例如,ph更改事件将重新绘制新系列

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更新为每个系列工具提示添加dinamically?而不是使用全局工具提示并检查系列?

感谢您的任何提示!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我决定每个系列使用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();
});