HighCharts：一個圖例，兩個圖表

我有四個不同的HighChart樣條圖。全部包含代表六個新英格蘭國家的系列。我想單擊任何圖例並在所有圖表中隱藏/顯示該系列。我曾嘗試過legendclickitem，但無法讓它實現兩個圖表。是我問的可能，如果是的話，你能指出我在正確的方向，謝謝。HighCharts：一個圖例，兩個圖表

答：

使用帕維爾融合素代碼，以保持一個傳說我用下面的代碼在每個排行榜上。您可以點擊任何圖例項目並更新所有圖表。

plotOptions: { 
series: { 
events: { 
legendItemClick: function(event) { 
if (this.visible) { 
$('#container1').highcharts().series[this.index].hide(); 
$('#container2').highcharts().series[this.index].hide(); 
$('#container3').highcharts().series[this.index].hide(); 
$('#container4').highcharts().series[this.index].hide(); 
} 
else { 
$('#container1').highcharts().series[this.index].show(); 
$('#container2').highcharts().series[this.index].show(); 
$('#container3').highcharts().series[this.index].show(); 
$('#container4').highcharts().series[this.index].show(); 
} 
return false; 
} 
} 
}

來源

2014-06-23 user3767675

這裏有一個更近的答案：https://stackoverflow.com/questions/15926516/grouping-legends-in-highcharts （通過使用linkedTo屬性。） – Amida

這是可能的，一起來看看：http://jsfiddle.net/teEQ3/

$('#container1').highcharts({ 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    legend: { 
     enabled: false 
    }, 

    series: [{ 
     id: 'someId', 
     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] 
    }] 
}); 
$('#container2').highcharts({ 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    plotOptions: { 
     series: { 
      events: { 
       legendItemClick: function (event) { 
        var XYZ = $('#container1').highcharts(), 
         series = XYZ.get(this.options.id); //get corresponding series 

        if (series) { 
         if (this.visible) { 
          series.hide(); 
         } else { 
          series.show(); 
         } 
        } 
       } 
      } 
     } 
    }, 

    series: [{ 
     id: 'someId', 
     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] 
    }] 
});

這樣的想法是讓只有在一個圖表圖例，然後在各自所有的圖表隱藏相應的系列。

來源

2014-06-23 14:01:17

謝謝你，偉大的工程！ – user3767675

這對餅圖/甜甜圈圖表的工作原理是否相同？我有一些問題。 – Booza

是和不是。我的意思是，這個想法是一樣的，但實現有點不同。事件在'point.events'中設置，而不是在'series.events'中設置，每個點都應該有一個ID，而不是系列。另外，使用'point.setVisible（vis）'，而不是'series.show（）/ hide（）'演示：http://jsfiddle.net/teEQ3/86/ –

-1

如果我想讓我的圖表分成標籤，並帶有圖例（在它自己的標籤中）來控制所有其他標籤中的可見系列 - 我將如何做到這一點？我已經讀過，可以通過創建一個圖表（使用同一系列）並且不顯示圖表，只是圖例來完成這項工作。這可能嗎？

來源

2014-11-03 20:01:47 BretW

不要發佈問題作爲答案。 –

HighCharts：一個圖例，兩個圖表

回答

相關問題