來自CSV文件（Arduino基礎和JavaScript）的HighStock多系列

好的，大家好。我從 CSV文件設計了我的HighStock作品。我可以花時間和一條線到我的系列。我想要從數據中獲取2行。有任何想法嗎？在將來我想獲得2個小數例如25,01。你有想法嗎？來自CSV文件（Arduino基礎和JavaScript）的HighStock多系列

在CSV中有秒，數據，數據。它打印1分鐘。
是的，我來自芬蘭學生敢和我的代碼吸... :)

http://imgur.com/L2VSRGj

數據：以秒爲單位 時間，價值，價值

0,25,23
60,25,23
120,25,23
....
14220,24,22
14280,24,22
14340,24,22

的Javascript在我HC.htm：（它的指數）

<!DOCTYPE HTML> 
<html>   
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Hannun virtamittaus</title> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <style type="text/css"> 
                                  ${demo.css} 
     </style> 
     <script type="text/javascript"> 
function getDataFilename(str){ 
    point = str.lastIndexOf("file=")+4; 

    tempString = str.substring(point+1,str.length) 
    if (tempString.indexOf("&") == -1){ 
    return(tempString); 
    } 
    else{ 
     return tempString.substring(0,tempString.indexOf("&")); 
    } 

} 

query = window.location.search; 

var dataFilePath = "/data/"+getDataFilename(query); 

$(function() { 
    var chart; 
    $(document).ready(function() { 

     // define the options 
     var options = { 

      chart: { 
       renderTo: 'container', 
       zoomType: 'x', 
       spacingRight: 5 
      }, 

      title: { 
       text: 'Arduinolla mitatut virran arvot' 
      }, 

      subtitle: { 
       text: 'Zoomaa haluttu luenta alue' 
      }, 

      xAxis: { 
       type: 'datetime', 
       maxZoom: 2 * 4000000 
      }, 

      yAxis: { 
       title: { 
        text: 'Virran arvot 0-250A' 
       }, 
       min: 0, 
       startOnTick: false, 
       showFirstLabel: false 
      }, 

      legend: { 
       enabled: false 
      }, 

      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y; 
       } 
      }, 

      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        lineWidth: 1.0, 
        point: { 
         events: { 
          click: function() { 
           hs.htmlExpand(null, { 
            pageOrigin: { 
             x: this.pageX, 
             y: this.pageY 
            }, 
            headingText: this.series.name, 
            maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+ 
             this.y, 
            width: 100 
           }); 
          } 
         } 
        }, 
       } 
      }, 

      series: [{ 
       name: 'Op1', 
       marker: { 
        radius: 2 
       } 
      }] 
     }; 


     // Load data asynchronously using jQuery. On success, add the data 
     // to the options and initiate the chart. 
     // http://api.jquery.com/jQuery.get/ 

     jQuery.get(dataFilePath, null, function(csv, state, xhr) { 
      var lines = [], 
       date, 

       // set up the two data series 
       lightLevels = []; 

      // inconsistency 
      if (typeof csv !== 'string') { 
       csv = xhr.responseText; 
      } 

      // split the data return into lines and parse them 
      csv = csv.split(/\n/g); 
      jQuery.each(csv, function(i, line) { 

       // all data lines start with a double quote 
       line = line.split(','); 
       date = parseInt(line[0], 10)*1400; 

       lightLevels.push([ 
        date, 
        parseInt(line[1], 10) 
       ]); 

      }); 

      options.series[0].data = lightLevels; 

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

}); 
     </script> 
    </head> 
    <body> 
<script src="https://code.highcharts.com/stock/4.2.4/highstock.js"></script> 
<script src="https://code.highcharts.com/stock/4.2.4/modules/exporting.js"></script> 

<div id="container" style="height: 400px; min-width: 155px"></div> 
    </body> 
</html>

來源

2016-05-25 Hannu Rajala

你需要設置一系列對象的數組。

系列：

series: [{ 
      name: 'Op1', 
      marker: { 
       radius: 2 
      } 
},{ 
      name: 'Op2' 
}]

分析器

jQuery.get(dataFilePath, null, function(csv, state, xhr) { 
      var lines = [], 
       date, 

       // set up the two data series 
       lightLevels = []; 
       topLevels = []; 

      // inconsistency 
      if (typeof csv !== 'string') { 
       csv = xhr.responseText; 
      } 

      // split the data return into lines and parse them 
      csv = csv.split(/\n/g); 
      jQuery.each(csv, function(i, line) { 

       // all data lines start with a double quote 
       line = line.split(','); 
       date = parseInt(line[0], 10)*1400; 

       lightLevels.push([ 
        date, 
        parseInt(line[1], 10) 
       ]); 

       topLevels.push([ 
        date, 
        parseInt(line[2], 10) 
       ]); 

      }); 

      options.series[0].data = lightLevels; 
      options.series[1].data = topLevels; 

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

來源

2016-05-27 11:38:36

謝謝。但它現在只打印Op2：/。也許這是因爲他們幾乎相同的價值觀？ –

我想這是可能的，在傳說中你應該看到兩個項目，對吧？ –

Yeap。我會嘗試做更多不同的計算。 –

來自CSV文件（Arduino基礎和JavaScript）的HighStock多系列

回答

相關問題