在Highcharts中顯示隱形系列的工具提示

我正在嘗試使用Highcharts顯示自定義工具提示。您可以在此處找到代碼示例： http://jsfiddle.net/jalbertbowdenii/fDNh9/188/在Highcharts中顯示隱形系列的工具提示

將鼠標懸停在圖表上時，可以看到工具提示僅包含系列2的值，但不包含系列1（不可見）的值。當您在圖例中點擊「系列1」時，您可以在工具提示中看到系列1的值。

編輯：沒有code犯，剛剛殺青linkrot /秉承編輯規則...
有沒有辦法從在工具提示中的隱形系列的顯示值是多少？

2011-09-26 j0nes

tooltip: { 
    formatter: function() { 
     var s = '<b>'+ this.x +'</b>'; 
     var chart = this.points[0].series.chart; //get the chart object 
     var categories = chart.xAxis[0].categories; //get the categories array 
     var index = 0; 
     while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays   
     $.each(chart.series, function(i, series) { //loop through series array 
      s += '<br/>'+ series.name +': ' + 
       series.data[index].y +'m';  //use index to get the y value 
     });   
     return s; 
    }, 
    shared: true 
}

來源

2011-09-26 21:19:18

感謝您接受此解決方案，因爲我可以處理來自Highcharts的內置數據數組。 – j0nes

是的，如果您從'this.point'和'this.points'讀取圖表，它也可以用於非共享工具提示 – eolsson

@ j0nes：歡迎。 –

工具提示格式化是像任何其他功能的功能，因此，如果你只是把數據提供可與所有系列的值返回一個字符串。在這個example我移動了系列數組和類別來分離變量，工具提示格式化程序使用這些數組中的索引來查找值。

formatter: function() { 
    var index = $.inArray(this.x, categories); 
    var s = '<b>'+ this.x +'</b>'; 

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index]; 
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index]; 

    return s; 
}

來源

2011-09-26 17:39:49 eolsson

另一種方式去了解，這是使該系列產品的某些屬性不可見的，而不是整個系列本身。這將允許你在工具提示和圖例中看到它。

這裏就是我所做的：「透明」

首先，我設置了無形系列的線條顏色
接下來，我將不可見系列標記的填充顏色設置爲「透明」。
最後，我禁用了標記的懸停狀態。這可以防止在將可見光序列中的每個點移動鼠標光標時出現陰影高亮圓圈。

這是你原來的提琴的修改版本這些變化：http://jsfiddle.net/brightmatrix/fDNh9/184/

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    lineColor: 'transparent',  // make the line invisible 
    marker: { 
     fillColor: 'transparent', // make the line markers invisible 
     states: { 
      hover: { 
       enabled: false  // prevent the highlight circle on hover 
      } 
     } 
    } 
}, { 
    data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 
}]

兩個項目需要注意：

我用過的屬性enableMouseTracking: false與其他無形的系列，以防止用戶與他們互動（實現視覺效果）。如果你爲隱形系列設置了這個功能，它會阻止系列數據出現在你的工具提示中。
如果你想保持你的invisbile系列出現在傳說中，你可以添加屬性showInLegend: false。其數據仍將顯示在工具提示中。

我希望這可以幫助別人誰遇到這個問題。

來源

2016-08-24 11:27:13

我認爲這將使Highcharts仍然「畫」不可見的系列，並因此在繪製「剩餘」可見系列時在高點和低點等因素。這可能不是你想要的（你希望圖表專注於可見的系列）。 – stolsvik

@stolsvik這是一個有效的點，尤其是如果不可見序列具有離羣值數據，這會迫使最小或最大軸值遠遠超出可見序列。這個堆棧溢出問題有一個可以減輕這個問題的定製答案：http://stackoverflow.com/questions/37412442/highcharts-how-to-exempt-a-series-from-redraw-zoom-calculations –

答案太晚了，但這是我所做的。繪製圖表並使顏色透明。在相反的y軸上繪製它並將最大值設置爲零。將alignTicks設置爲false。像這樣的東西。

chart: { 
     alignTicks: false, 
     type: 'line' 
    },

然後，唯一需要的是改變工具提示格式化程序中的顏色值，因爲標籤將是透明的。

希望這可以幫助別人。

快樂學習:)

來源

2016-09-15 01:41:42 Vatsal

在Highcharts中顯示隱形系列的工具提示

回答

相關問題