Question

我是Highcharts的新人。我正在从Java服务器端JSON列表创建多个系列读取，JSON对象包含多个系列，每个系列都有'Electric IRms'，后跟'Temperature'映射到两个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轴图表绘制时不显示标签。

由于

Answer 1

将序列添加到不同的yAxis时，您需要指定该yAxis或ID的索引，例如：

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

Highcharts多个y轴单元不显示

1 个答案: