2016-02-26 91 views
1

我有一個返回圖表列表的WebService。這是我的類圖的結構:Highstock不同的時間值區間

public class Point 
{ 
    public string Date { get; set; } 
    public float Value { get; set; } 
} 

public class Serie 
{ 
    public string Port { get; set; } 
    public string Name { get; set; } 
    public string Unit { get; set; } 
    public List<Point> Data { get; set; } 
} 

public class Chart 
{ 
    public string Unit { get; set; } 

    public List<Serie> Series { get; set; } 
} 

public List<Chart> charts; 

我用HighStock,在JS腳本來顯示從我圖的列表我的所有圖表。 我希望按單位分組我的系列,併爲每個單元創建一個新的yAxis以顯示相同的單元系列(請參見下面的圖像)。

這是從js文件的代碼:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "WebService.asmx/Channels", 
      data: "{}", 
      dataType: "json", 
      success: function (Charts) { 
       document.getElementById("debug").innerHTML = Charts.d; 
       Charts = Charts.d; 

       var margin = 40, 
       top = 100, 
       height = 160, 
       count = 0; 

       // Generals options for chart 
       var options = { 
        credits: { enabled: false }, 
        chart: { 
         renderTo: chart, 
         zoomType: 'x', 
         alignTicks: false 
        }, 
        legend: { 
         enabled: true 
        }, 
        title: { 
         text: 'Values' 
        }, 
        tooltip: { 
         valueDecimals: 2, 
         shared: true 
        }, 
        xAxis: {  
         ordinal: false 
        }, 
        yAxis: [], 
        series: [] 
       }; 

       // Go through Charts 
       for (var i in Charts) { 

         // Infos for the yAxis of the serie 
         // ------------------- 
         options.yAxis.push({ 
          title: { 
           text: "[" + Charts[i].Unit + "]" 
          }, 
          labels: { 
           x: 30, 
           y: 4, 
           align: "right", 
           format: '{value} ' + Charts[i].Unit 
          }, 
          offset: 0, 
          top: top, 
          height: height, 
          opposite: true 
         }); 

         // Go through Series in a Charts 
         for (var j in Charts[i].Series) { 


          // Infos for the serie 
          // ------------------- 
          var data = []; 

          // Go through Data in Series of a Charts 
          for (var k in Charts[i].Series[j].Data) { 
           var point = new Array(new Date(Charts[i].Series[j].Data[k].Date).getTime(), Charts[i].Series[j].Data[k].Value); 
           data.push(point); 
          }// End: Go through Data in Series of a Charts 

          count = Number(i); 

          // Add a serie and these attributes 
          options.series.push({ 
           name: Charts[i].Series[j].Name, 
           data: data, 
           tooltip: { 
            valueSuffix: ' ' + Charts[i].Series[j].Unit, 
            valueDecimals: 3 
           }, 
           yAxis: count 
          }); 

         }// End: Go through Series in a Charts 

         count++; 
         top += height + margin; 

       }// End: Go through Charts 

       options.chart.height = top + 190; 

       Highcharts.StockChart(options); 
      }, 
      error: function (xhr, thrownError) { 
       //alert("Error : " + xhr.status + "\nMessage : \n" + xhr.responseText); 
       document.getElementById("debug").innerHTML = "Error : " + xhr.status + "\nMessage : \n" + xhr.responseText; 
      } 
     }); 
    }); 
</script> 

如果我運行代碼:

Blank page no chart

,我有錯誤是:

Uncaught TypeError: Cannot read property 'clientX' of undefined -> highstock.js:177

和也(有時)這個錯誤:

Uncaught TypeError: Cannot read property 'info' of undefined -> highstock.js:342 (not sur about the #line)

如果我刪除意甲與不同的時間間隔,或者如果取消勾選V batt的系列(與不同的間隔意甲)工作原理:

All my charts are displayed

我花了很多時間互聯網上和StackOverflow上找到我的問題,但...沒什麼問題...

編輯

- >我們可以在同一個圖表上繪製的最大意義是什麼?
- >我們可以在同一個圖表上繪製的最大點是多少?

非常感謝您的反饋。

最好的問候,

吊杆

問題解決了!

問題是由我的web服務發送的時代數據在後臺,HighStock需要毫秒級。

+0

沒有像系列或點的數量這樣的限制(除非它不會是瀏覽器的矯枉過正)。你可以試試Highstock的主分支嗎?見http://github.highcharts.com/highstock.src.js - 我想我遇到過類似的問題。此外,任何機會重新jsfiddle問題?您可以使用靜態數據,而不是AJAX。 –

回答

1

問題解決!

問題是由我的web服務發送的時代數據在後臺,HighStock需要毫秒級。