1. 首頁
  2. 問答
  3. 添加下拉選擇菜單以選擇高圖中的csv文件

添加下拉選擇菜單以選擇高圖中的csv文件

2017-07-06 76 views
0

嗨我在編程和嘗試我的手很新。我正在研究一個我正在使用highchart的項目。我正在使用csv文件作爲數據源。請看代碼添加下拉選擇菜單以選擇高圖中的csv文件

<script type='text/javascript'> 
$(document).ready(function() {  
    $.get('dhaka.csv', function(csv) { 
     // Create the chart 
     window.chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container', 
       type:'spline' 
      }, 
      data: { 
       csv: csv 
      }, 
     }, function(chart) { 

     }); 
    }); 
}); 
</script> 


</head> 
<body> 
<select id="selectOpt"> 
    <option value="dhaka.csv">Dhaka</option> 
    <option value="khulna.csv">Khulna</option> 
    <option value="maymansingh.csv">Maymanshingh</option> 
</select> 
<div id="container" style="height: 600px; min-width: 600px; margin-top:10px;"></div> 
</body>

我將有多個csv文件，需要有一個選項可以從下拉菜單中進行選擇。希望我解釋得很好。提前致謝。你的幫助是appriciated。

我已經使用parsecsv.lib來讀取一個csv文件，我的選擇菜單將獲得該csv的選項。我已經完成了。但我需要傳遞很少的其他值，我不能。請幫我在這..更新的代碼是在這裏

<?php 
     require_once('parsecsv.lib.php'); 
     $csv = new parseCSV(); 
     $csv->auto('latlang.csv'); 
     $num = count($csv->data); 
     $numRow = $num-1; 
    ?> 
    <select id="selectOpt" style="width:200px;"> 
    <?php 
     for ($x = 0; $x <= $numRow; $x++) { 
      $ston= $csv->data[$x]['Station']; 
      //$arr = explode(' ',trim($ston)); 
      echo "<option value=".$ston.">".$ston."</option>"; 
     } 
    ?> 
    </select> 
    <div id="container" style="height: 400px; width: 600px; margin-top:10px;"></div> 
    <p id="demo"></p> 

</body> 
<script type='text/javascript'> 
$(document).ready(function() {  
    getChart('Amalshid'); 
}); 
var getChart = function(strFileName){ 
    $.get(strFileName + '.csv', function(csv) { 
    // I AM STUCK HERE // 
    // data form latlang.csv 
    var locations = <?php print json_encode($csv->data); ?>; 
    for (i = 0; i < locations.length; i++) { 
     var dataz = locations[i]; 
     document.getElementById('demo').innerHTML = strFileName + '<br>' + dataz.Station + '<br>' + dataz.DL + '<br>' + dataz.HRWL; 
    } 
     // Create the chart 
     window.chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container', 
       type:'spline' 
      }, 
      data: { 
       csv: csv, 
       startRow: 34, 
       startColumn:3 
      }, 
     }, function(chart) { 

     }); 
    }); 
}; 

$("#selectOpt").on("change",function(e){ 
    getChart($(this).val()); 
});

CSV文件看起來像這樣

Station,RiverName,Longtitude,Latitude,DL,HRWL,CL 
Amalshid,Kushiyara,92.4716,24.8845,15.85,18.28,100 
Bahadurabad,B'putra,89.6743,25.0934,19.5,20.62,1 
Hardinge.Bridge,Ganges,89.0279,24.072,14.25,15.19,1

我所需要的，當我從它會採取河名的下拉菜單中選擇和DL並通過該值。在此先感謝

來源

2017-07-06 rabbishakir

回答

0

您需要創建一個有趣這將創建圖表並在選擇更改時調用它。這個新函數（我命名爲'getChart'）將接受csv文件名作爲參數並將其注入到$ .get中。現在你只在文檔加載時創建一次圖表。

像這樣的東西應該做的伎倆：

$(document).ready(function() {  
    getChart('dhaka.csv'); 
}); 

var getChart = function(strFileName){ 
    $.get(strFileName, function(csv) { 
     // Create the chart 
     window.chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container', 
       type:'spline' 
      }, 
      data: { 
       csv: csv 
      }, 
     }, function(chart) { 

     }); 
    }); 
}; 

$("#selectOpt").on("change",function(e){ 
    getChart($(this).val()); 
});

（注：我沒那麼熟悉highcharts所以我假設你的代碼的一部分工作，我只展示了簡單的動作將Select的值傳遞給另一個函數。如果圖表沒有被生成，這是一個單獨的問題。）

來源

2017-07-06 20:33:35 dinologic

+0

嗨，你的解決方案做了伎倆。但現在我卡在其他地方了。我想從另一個csv文件中獲得選擇菜單選項，你可以幫忙嗎？ – rabbishakir

+0

您需要動態地將文件的名稱注入到函數中。有很多方法可以做到這一點。文件的名稱來自哪裏？服務器代碼？用戶輸入？ – dinologic

相關問題

 相關問題