2013-07-17 105 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};