2013-07-17 132 views
0

我是Highcharts的新人。我從Java服務器端JSON列表創建了多個系列閱讀,JSON對象由多個系列組成,每個系列具有'Electric IRms',其後是'Temperature'映射到兩個Y軸標籤。Highcharts多個y軸單元不顯示

我遇到的問題是第二個Y軸單元不顯示。 的JSON列表格式是

{name, "serialNumber1_type1", {"data", [[timestamp1, value1], 
             [[timestamp2, value2], ... 
{name, "serialNumber1_type2", {"data", [[timestamp1, value1], 
             [[timestamp2, value2], ... 
{name, "serialNumber2_type1", {"data", [[timestamp1, value1], 
             [[timestamp2, value2], 
{name, "serialNumber2_type2", {"data", [[timestamp1, value1], 
... 
{"title","HighCharts Title"} 

如我的JSON列表

[{"name":"5004672_IRms"},{"data":[[1373958000000,53],[1373958300000,53].... 
{"name","5004672_Temperature"},{"data":[[1373958000000,80],[1373958300000,81].... 
{"name":"5004687_IRms"},{"data":[[1373958000000,54],[1373958300000,53].. 
{"name","5004687_Temperature"},{"data":[[1373958000000,82],[1373958300000,83]... 
.... 
{"title", "HighCharts_Title"} 
] 

我的代碼如下

$(function() { 
var titleName=''; 
    var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'spline' 
       }, 
       rangeSelector : { 
        { 
       type: 'day', 
       count: 1, 
       text: '1 d' 
        },{ 
       type: 'week', 
        count: 1, 
        text: '1 wk' 
        }, { 
       type: 'all', 
       text: 'all' 
       }], 
       selected: 1 
       }, 

       title: { 
        text: '(IRms & Temperature)' 
       }, 

       xAxis: { 
        title: { 
         text: 'Time (UTC)' 
        }, 
        type: 'datetime', 
        labels: { 
         align: 'left', 
      formatter: function() { 
      return Highcharts.dateFormat('%I:%M %P', this.value); 
      } 
        }, 
      gridLineDashStyle: 'dot', 
      gridLineWidth: 1, 
      tickInterval: 60 * 60 * 1000, 
      lineWidth: 2, 
      lineColor: '#92A8CD', 
         tickWidth: 3, 
         tickLength: 6, 
         tickColor: '#92A8CD', 
       }, 
       yAxis: [{ 
      labels: { 
       formatter: function() { 
        return this.value; 
       } 
      }, 
        title: { 
         text: '' 
        }, 
     opposite: true 
     }, 
     { 
      gridLineWidth: 0, 
      title: { 
       text: '', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      labels: { 
       formatter: function() { 
        return this.value +'°F'; 
       } 
      }     
      } 
     ], 

       plotOptions: { 
        series: { 
         cursor: 'pointer', 
         point: { 
          events: { 
           ... 
             width: 200 
            }); 

            sname = this.series.name; 
            $.getJSON('/em/em/historypointdetail?pointid=' + sname, function(response) { 
             ...... 
            }); 
           } 
          } 
         }, 

         marker: { 
          lineWidth: 
         } 
        }, 

       series: [] 
    }; 

var serialNumber; 
$.getJSON('/em/em/lli?id=<c:out value="${elementIds}" />',function(data) { 
    $.each(data, function(key,value) { 
    $.each(value, function(key,val) { 
     if (key == 'name') { 
       serialNumber = val; 
     } 
     else if (key == 'data') { 
      var dataseries = { data: []}; 
       $.each(val, function(key,val) { 
         dataseries.data.push(val); 
       }); 
       dataseries.name=serialNumber; 
      var names = serialNumber.split('_'); 
      if (names[1] == 'IRms') { 
       options.title.text = 'Current'; 
       options.series.yAxis = 0; 
       options.yAxis[0].title.text = 'Current'; 
      } 
      else if (names[1] == 'Temperature') { 
       options.title.text = 'Temperature'; 
       options.series.yAxis = 1; 
       options.yAxis[1].title.text = 'Temperature'; 
      } 
       options.series.push(dataseries); 
      } 
      else if (key == 'title') { 
       htext = val; 
      } 
     });    
    });   

     chart = new Highcharts.StockChart(options); 
     chart.setTitle({text: htext}); 
     }).error(function() {console.log('error');}); 

我創建了兩個Y軸和第二Y軸有標籤返回THIS.VALUE + 「 F」。但第二個Y軸 標籤在圖表繪製時不顯示。

感謝

回答

1

當添加一系列不同的Y軸,你需要指定Y軸的指數,或ID,例如:

var dataseries = { data: [], yAxis: 1};