根据用户输入动态设置高图表尾行选项

Dynamically set highcharts endrow option based on user input

本文关键字：高图表 行选 选项 设置 动态 用户 输入      更新时间：2023-09-26

我想根据用户在高图表中的输入动态设置结束行对象。 用户将从值 5、10、25 和 all 之间的列表控件中进行选择，我想将该值传递给 data.endrow 属性。 思潮？

    data: {
        csv: document.getElementById('csv').innerHTML,
        startRow: 0,
        endRow: <userinput>
        endColumn: 1,
        firstRowAsNames: false
    },
您可以在

单击提交按钮后制作图表。您可以检查列表中的选定值并将其传递给图表选项：

$('.submit').click(function() {
    var dropMenu = $('#drop'),
      selectedIndex = dropMenu[0].options.selectedIndex,
      stringVal = $(dropMenu)[0].options[selectedIndex].value,
      value = parseInt(stringVal);
    if (stringVal === 'All') {
      var lines = document.getElementById('csv').innerHTML.split(''n');
      value = lines.length - 1;
    }
});

然后，您可以使用新的endRow参数制作图表：

  $('#container').highcharts({
    title: {
      text: 'Global temperature change'
    },
    subtitle: {
      text: 'Data module: Show only last 20 years by limiting start row.'
    },
    data: {
      csv: document.getElementById('csv').innerHTML,
      startRow: 1,
      endRow: value,
      endColumn: 1,
      firstRowAsNames: false
    },
    xAxis: {
      allowDecimals: false
    },
    series: [{
      name: 'Annual mean'
    }]
  });

示例：http://jsfiddle.net/jpko073c/3/

相关文章：