Question

我正在尝试使用两个下拉输入，根据下拉列表中的选定值，将生成特定数据文件的文件名，并将其用作使用折线图的数据源highcharts。

查看我正在尝试的代码：

$(document).ready(function() {
  $('#button1').click(function() {
    var obj_motorId = document.getElementById("Motor");
    var motorId = obj_motorId.value;

    var obj_parId = document.getElementById("Parameter");
    var parId = obj_parId.value;

    var url = motorId + "_" + parId + ".csv";

    $.get(url, function(csv) {
      var speedSeries = [
        []
      ];
      var lines = csv.trim().split('\n');
      $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        if ((lineNo !== 0) && (line != "")) {
          var x = new Date(items[0]),
            speed1 = parseFloat(items[1]);
          var year = x.getFullYear();
          var month = x.getMonth();
          var day = x.getDate();
          var hour = x.getHours();
          var min = x.getMinutes();
          var thisDate = Date.UTC(year, month, day, hour, min);
          speedSeries[0].push([thisDate, speed1]);
        }
      });

      var options = {
        series: [],
        chart: {
          zoomType: 'x',
          renderTo: "chart1"
        },
        title: {
          text: 'Parameter: '
        },

        xAxis: {
          type: 'datetime',
          title: {
            text: 'Sept 2, 2015 to Sept 30, 2015'
          },
        },
        yAxis: {
          title: {
            //                            text: parName;   
          }
        },
        legend: {
          enabled: false
        },
        tooltip: {
          valueDecimals: 2
        },
      };

      options.series.push({
        data: speedSeries[0],
        type: 'line',
        name: 'Value'
      });

      var chart1 = new Highcharts.Chart(options);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<form>
  <select id="Motor">
    <option value="5045_01">Motor 1</option>
    <option value="5045_02">Motor 2</option>
    <option value="5045_03">Motor 3</option>       
  </select>
  <br>
  <br>
  <select id="Parameter">
    <option value="01.10">Parameter 1</option>
    <option value="01.11">Parameter 2</option>
    <option value="01.12">Parameter 3</option>
  </select>

  <button id="button1">Submit</button>

  <div id="chart1" style="width: 800px; height: 500px"></div>

我尝试使用下拉列表生成URL的csv文件名称为：“ 5045_03_01.11.csv ”，它是Motor Id 5045_03 的组合名称电机3 和参数名称参数2 。我的名为 5045_03_01.11.csv 的csv文件包含此格式的数据。

9/30/2015 6:39:14 PM,980.015137
9/29/2015 6:38:16 PM,964.247925
9/28/2015 6:37:15 PM,965.460938
9/27/2015 6:36:26 PM,996.995483
9/26/2015 6:35:16 PM,972.737671
9/25/2015 6:34:14 PM,972.737671
9/24/2015 6:33:14 PM,966.673218

我可以从下拉列表中获取两者的值，我使用两个下拉列表的警报检查了这两个值。我不知道我尝试从所选值生成的URL是否正确，并且还传递给图表函数。

请帮助我。

从下拉列值生成csv URL并传递它以创建高图

0 个答案: