Question

嗨，我是编程和尝试的新手。我正在开发一个我使用高图的项目。我使用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文件，并且需要从下拉菜单中选择一个选项。希望我已经解释得当。提前致谢。你的帮助很大。

我已经使用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

我需要的是，当我从下拉菜单中选择时，它将采用River名称和DL并传递值。提前谢谢

Answer 1

因此，在select元素上设置一个事件监听器，以便在更改时获取所选的csv，然后使用高级图表series.setdata命令

您正在使用highcharts，假设您已安装jquery

您需要的东西：事件绑定：https://api.jquery.com/change/

highcharts事件参考：http://api.highcharts.com/highcharts/Series.setData

Answer 2

您需要创建一个创建图表的函数，并在选择更改时调用它。这个新函数（我已命名为＆＃39; getChart＆＃39;）将接受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的值传递给另一个函数的简单行为。如果生成的图表不是一个单独的问题。）

添加下拉选择菜单以选择高图中的csv文件

2 个答案: