根据用户输入在 Highcharts 中添加系列

Question

如何在highchart中动态添加系列，系列的数量取决于用户勾选的复选框

[数组[265],数组[259],数组[265],数组[256]]

让我们假设我有一个像上面那样的数组父子数组。 arrays-Child 的数量取决于选中的复选框。每个 arrays-Child 应该代表一个系列。

Answer 1

列表项

为每个带有索引数据的子数组添加一个复选框属性
将一个 onchange 事件设置为一个函数，该函数将一个项目推送到每个选中复选框的 $.highchart 的 series 属性。

$(function() {
  /* Build random Data */
  var randomData = [
    [], /* Child 0 */
    [], /* Child 1 */
    [], /* Child 2 */
    [], /* Child 3 */
  ].map(function(child) {
    for (var i = 1; i <= 31; i++) {
      child.push([Date.UTC(2016, 7, i), Math.random()]);
    }
    return child;
  });

  /* Append checkboxes to DOM */
  randomData.forEach(function(child, i) {
    $('#the-form').append('<input checked type="checkbox" data-index="' + i + '"> Series #' + (i + 1) + '<br>');
  });

  /* Chart drawing function */
  var redraw = function() {
    $('#the-chart').highcharts({
      chart: {
        zoomType: 'x'
      },
      title: {
        text: 'Random series data over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Some rate'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },
      series: randomData.filter(function(child, i) {
        /* Choose checked only */
        return document.querySelector('input[data-index="' + i + '"]').checked
      }).map(function(child, i) {
        /* Then return as series */
        return {
          type: 'area',
          name: 'Series #' + (i + 1),
          data: child
        };
      })
    });
  };

  /* Call redraw on change */
  $('input[data-index]').on('change', redraw);

  /* And select the first one start */
  $('input[data-index]:first').val(true);
  redraw();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h3>Select Series</h3>
<div id="the-form">
</div>
<div id="the-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

根据用户输入在 Highcharts 中添加系列

Add Series in Highcharts on the basis of user input

javascript

json

highcharts

highstock