Question

我想根据highcharts中的用户输入动态设置endrow对象。用户将从值5,10,25和all之间的列表控件中进行选择，并且我想将该值传递给data.endrow属性。想法？

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

Answer 1

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

$('.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/

根据用户输入动态设置highcharts endrow选项

1 个答案: