2013-03-20 95 views
2

我有一個顯示三種不同能源成本的Highcharts圖。我似乎無法讓我的傳說顯示,也無法顯示軸標題。傳說和軸標題沒有在Highcharts圖中顯示

傳說應該有標題;天然氣,電力,石油,他們也應該在軸心上。

的鏈接的jsfiddle是:

http://jsfiddle.net/petenaylor/HHEfW/3/

(function ($) { // encapsulate jQuery 
    $(function() { 
     var seriesOptions = [], 
      yAxisOptions = [], 
      seriesCounter = 0, 
      names = ['Electric', 'Oil', 'Gas'], 
      colors = Highcharts.getOptions().colors; 

     $.each(names, function (i, name) { 
      $(function() { 
       $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
        // Create the chart 
        window.chart = new Highcharts.StockChart({ 
         chart: { 
          renderTo: 'container', 
          zoomType: 'x' 
         }, 
         legend: { 
          layout: 'vertical', 
          align: 'right', 
          verticalAlign: 'top', 
          x: 10, 
          y: 100, 
          borderWidth: 0 
         }, 
         rangeSelector: { 
          selected: 12 
         }, 
         title: { 
          text: 'Energy Prices' 
         }, 
         yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}], 
         series: [ 
          { 
           name: 'Electric', 
           yAxis:0, 
           data: [ 
            [1072915200000, 5.73], 
            [1073001600000, 5.81], 
            [1073088000000, 5.23], 
            [1073174400000, 5.32] 
           ], 
           tooltip: { 
            valueDecimals: 2 
           } 
          }, { 
           name: 'Oil', 
           yAxis:1, 
           data: [ 
            [1072915200000, 29.73], 
            [1073001600000, 29.73], 
            [1073088000000, 29.73], 
            [1073174400000, 29.73] 
           ], 
           tooltip: { 
            valueDecimals: 2 
           } 
          }, { 
           name: 'Gas', 
           yAxis:2, 
           data: [ 
            [1072915200000, 0.823], 
            [1073001600000, 0.82], 
            [1073088000000, 0.82], 
            [1073174400000, 0.82] 
           ], 
           tooltip: { 
            valueDecimals: 2 
           } 
          } 
         ] 
        }); 
       }); 
      }); 
     }); 

     // create the chart when all data is loaded 
     function createChart() { 
      chart = new Highcharts.StockChart({ 
       chart: { 
        renderTo: 'container' 
       }, 
       rangeSelector: { 
        selected: 4 
       }, 
       yAxis: [{ // Primary yAxis 
        labels: { 
         formatter: function() { 
          return (this.value > 0 ? '+' : '') + this.value + '%'; 
         }, 
         style: { 
          color: '#89A54E' 
         } 
        }, 
        title: { 
         text: 'Electric', 
         style: { 
          color: '#89A54E' 
         } 
        }, 
        opposite: true 
       }, { // Secondary yAxis 
        gridLineWidth: 0, 
        title: { 
         text: 'Oil', 
         style: { 
          color: '#4572A7' 
         } 
        }, 
        labels: { 
         formatter: function() { 
          return this.value; 
         }, 
         style: { 
          color: '#4572A7' 
         } 
        } 

       }, { // Tertiary yAxis 
        gridLineWidth: 0, 
        title: { 
         text: 'Gas', 
         style: { 
          color: '#AA4643' 
         } 
        }, 
        labels: { 
         formatter: function() { 
          return this.value; 
         }, 
         style: { 
          color: '#AA4643' 
         } 
        }, 
        opposite: true 
       }], 
       plotOptions: { 
        series: { 
         compare: 'percent' 
        } 
       }, 
       tooltip: { 
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
        valueDecimals: 2 
       }, 
       series: seriesOptions 
      }); 
     } 
    }); 
})(jQuery); 

誰能幫我告訴圖例和軸標題?

傳說還需要點擊才能讓每一行消失並在點擊時重新出現。

非常感謝您的幫助

皮特

回答