2014-03-03 51 views
2

如何在一個圖表中添加2個傳說?基本上,我只需要一個堆在圖表中顯示圖例的2個拷貝.. http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/labelformatter/在一個圖表中添加2個傳說

$(function() { 
$('#container').highcharts({ 

    chart: { 
    }, 

    legend: { 
     layout: 'vertical', 
     backgroundColor: '#FFFFFF', 
     floating: true, 
     align: 'left', 
     verticalAlign: 'top', 
     x: 90, 
     y: 45, 
     labelFormatter: function() { 
      return this.name +' (click to hide)'; 
     } 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    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]   
    }, { 
     data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]  
    }] 
}); 

});

+0

哪個繪圖庫您使用? –

+0

我使用標準高圖譜庫 – maximumride

回答

1

highcharts只支持單個圖例。如果你需要additioanl,你應該將其創建爲HTML對象,這將在本例中調用顯示/隱藏功能特徵系列,如:

$legend = $('#customLegend'); 

    $.each(chart.series[0].data, function (j, data) { 

     $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>'); 

    }); 

    $('#customLegend .item').click(function(){ 
     var inx = $(this).index(), 
      point = chart.series[0].data[inx]; 

     if(point.visible) 
      point.setVisible(false); 
     else 
      point.setVisible(true); 
    });  

http://jsfiddle.net/N3KAC/1/

+0

這也有幫助。 http://stackoverflow.com/questions/17449534/highcharts-fire-legenditemclick-event – maximumride