在用户输入的基础上在Highcharts中添加系列 [英] Add Series in Highcharts on the basis of user input

问题描述

如何动态添加高图系列，系列数取决于用户检查的复选框。

[Array [265]，Array [259] ，Array [265]，Array [256]]

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

解决方案

• 为每个具有索引数据属性的子数组添加复选框
  
• 将 onchange 事件设置为一个将项目推送到每个复选框的 $。highchart 的系列属性中的函数。

$（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;}）; / *追加复选框到DOM * / randomData.forEach（function（child，i）{$（'＃the-form'）。append（'< input c hecks type =checkboxdata-index ='+ i +'>系列＃'+（i + 1）+'< br>'）; }）; / *图表绘制函数* / var redraw = function（）{$（'＃the-chart'）。highcharts（{chart：{zoomType：'x'}，title：{text：'随机时间序列数据'} ，字幕：{text：document.ontouchstart === undefined？'点击并拖动绘图区域以放大'：'捏图表放大'}，xAxis：{type：'datetime'}，yAxis：{ title：{text：'Some rate'}}，legend：{enabled：false}，plotOptions：{area：{marker：{radius：2}，lineWidth：1，states：{hover：{lineWidth：1}}， （）），系列：randomData.filter（function（child，i）{/ *选择仅检查* / return document.querySelector（'input [data-index =''+ i +'''）。checked }）。map（function（child，i）{ / *然后返回为系列* / return {type：'area'，name：'Series＃'+（i + 1），data：child}; }）}）; }; / *调用改变时重绘* / $（'input [data-index]'）。on（'change'，redraw）; / *并选择第一个开始* / $（'input [data-index]：first'）。val（true）; < script src =};}

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

How to add series in highchart dynamically, the number of series depends up on the check boxes checked by the user

[Array[265], Array[259], Array[265], Array[256]]

Lets suppose I have an array-Parent of arrays-Child like above. The number of arrays-Child depends upon the checkboxes checked. Each arrays-Child should represent a series.

解决方案

List item

• Add a checkbox for each child-array with an index data property
• Set an onchange event to a function that pushes an item into the series property of the $.highchart for each checked checkbox.

$(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中添加系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！