2015-03-13 77 views
0

即時使用高圖來顯示與演示http://www.highcharts.com/demo/arearange-line類似的平均值和最小值/最大值(區域範圍)值,而不僅僅是溫度,還可以使用複選框來選擇ph值或流量值。Highcharts - 是否有可能爲每個系列添加工具提示格式器?

因此,例如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; 
     } 
    }, 

我如何獲得arearange的邊界,並且是否可以使用Highcharts更新爲每個系列的工具提示添加dinamically?而不是使用全局工具提示並檢查系列?

感謝您的任何提示!

回答

0

不幸的是,所以你需要使用單個全局格式化程序,然後添加條件,將返回每個特定系列的工具提示。

0

好吧,我決定每系列使用提示/ 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(); 
}); 
相關問題