将下拉 Select 菜单添加到 highcharts 中的 select csv 文件

Question

您好，我在编程和尝试方面还是个新手。我正在做一个使用 highchart 的项目。我使用 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 文件，需要从下拉菜单中选择 select。希望我已经正确解释了。提前致谢。你的帮助很受欢迎。

我已经使用 parsecsv.lib 读取了一个 csv 文件，我的 select 菜单将从该 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

我所需要的，当我从下拉菜单中 select 时，它将获取河流名称和 DL 并传递值。提前致谢

Answer 1

因此，在您的 select 元素上设置事件侦听器，以便在更改时获取 selected csv，然后使用高图表 series.setdata 命令

您正在使用 highcharts，所以假设您已经 jquery 安装了

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

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

Answer 2

您需要创建一个函数来创建图表并在 select 更改时调用它。这个新函数（我将其命名为 '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 的值传递给另一个函数的简单操作. 如果没有生成图表，那是一个单独的问题。）

将下拉 Select 菜单添加到 highcharts 中的 select csv 文件

Adding a Dropdown Select menu to select csv files in highcharts

javascript

php

jquery

highcharts

highstock