Highcharts：與多個軸

我不是開發者，所以我需要你的幫助。我想創建一個帶有多軸的Highcharts的圖表，如下所示：http://www.highcharts.com/demo/combo-multi-axes Highcharts示例使用3種類型的值：溫度，壓力和降雨量，但我需要它在同一個圖表中繪製溫度和溼度，兩種類型的值。由於RRDtool（循環法數據庫），數據（溫度和溼度）存儲在XML中。現在我使用Highcharts來繪製基線，因此每個圖表只繪製一種類型的值（一個溫度圖表，另一個圖表爲溼度）。Highcharts：與多個軸

這是我的基本路線圖的代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
      <script type="text/javascript" src="/weather-station/js/highcharts.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(document).ready(function() { 

       $.ajax({ 
        type: "GET", 
        url: "/data/temperature24h.xml", 
        dataType: "xml", 
        success: function(xml) { 

         Highcharts.setOptions({global:{useUTC:false}}); 
         options={chart:{renderTo:"container-fluid",type:"spline",zoomType:"xy"},title:{text:""},xAxis:{type:"datetime",dateTimeLabelFormats:{hour:"%H. %M"}},yAxis:{title:{text:"Temperature (Â°C)"}},tooltip:{formatter:function(){return"<b>"+this.series.name+"</b><br/>"+Highcharts.dateFormat("%H:%M",this.x)+": "+this.y.toFixed(1)+" Â°C"}},plotOptions:{series:{marker:{radius:2}}},lineWidth:1,series:[]} 

         var series = [] 
         //alert('start'); 

         //define series 
         $(xml).find("entry").each(function() { 
          var seriesOptions = { 
           name: $(this).text(), 
           data: [] 
          }; 
          options.series.push(seriesOptions); 
         }); 
         //alert('finish part 1'); 

         //populate with data 
         $(xml).find("row").each(function() { 
          var t = parseInt($(this).find("t").text()) * 1000 

          $(this).find("v").each(function(index) { 
           var v = parseFloat($(this).text()) 
           v = v || null 
           if (v != null) { 
            //alert('index = ' + index + 'time=' + t + 'v=' + v); 
            options.series[index].data.push([t, v]) 
           }; 
          }); 
         }); 
         //alert('finish part 2'); 

         options.title.text = "Temperatures of the last 24h" 
         $.each(series, function(index) { 
          options.series.push(series[index]); 
         }); 
         //alert('finish part 3'); 

         chart = new Highcharts.Chart(options); 
        } 
       }); 
      }); 
     }); 

    </script> 

      <script type="text/javascript" src="/weather-station/js/exporting.js"></script>

這是XML的一些行（時間和數據）的例子：

<?xml version="1.0" encoding="ISO-8859-1"?> 

<xport> 
<meta> 
<start>1381828200</start> 
<step>300</step> 
<end>1381828200</end> 
<rows>289</rows> 
<columns>3</columns> 
<legend> 
<entry>External Temperature</entry> 
<entry>Internal Temperature</entry> 
<entry>Bedroom Temperature</entry> 
</legend> 
</meta> 
<data> 
<row><t>1381828200</t><v>2.2399482146e+01</v><v>2.3000000000e+01</v><v>2.2600000000e+01</v></row> 
<row><t>1381828500</t><v>2.2598366803e+01</v><v>2.3000000000e+01</v><v>2.2600000000e+01</v></row> 
<row><t>1381828800</t><v>2.2898350863e+01</v><v>2.3099450288e+01</v><v>2.2600000000e+01</v></row> 
<row><t>1381829100</t><v>2.3197774941e+01</v><v>2.3100000000e+01</v><v>2.2600000000e+01</v></row> 
<row><t>1381914600</t><v>NaN</v><v>NaN</v><v>NaN</v></row> 
</data> 
</xport>

請，有人可以修改我的基本Line Highcharts代碼通過從XML文件獲取數據來創建多軸代碼？

非常感謝！

來源

2013-10-16 Fabio

您需要熟悉解析多個yAxis的XML和系列結構，如下所示：http://www.highcharts.com/demo/combo-multi-axes然後在預處理期間準備數據。

來源

2013-10-16 11:00:22

Highcharts：與多個軸

回答

相關問題