Как изменить параметры диаграммы в amCharts, используя JavaScript?

Question

Как изменить параметры диаграммы в amCharts, используя JavaScript?

1

Я ищу, чтобы контролировать скрытое значение в параметрах линейного графика amCharts, чтобы я мог скрыть и показать графики с помощью какого-либо другого элемента управления, такого как radioobutton или dropdownlist.

Ссылка на amChart - htps://www.amcharts.com/dataviz-tip-12-show-four-lines-line-chart/

Я пытаюсь установить значение "скрытый", который является либо истинным, либо ложным под графиком, используя javascript.

Eicv 24 окт. 2018, в 19:21

Источник

Теги:

javascript

linechart

charts

amcharts

timeserieschart

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2018-10-24T17-06-00.000Z

вы можете динамически строить свойство "graphs" AmCharts в массиве,
затем используйте массив в makeChart

см. следующий рабочий фрагмент,
флажки используются для переключения каждого графика/серии.
диаграмма рисуется на событии 'change' каждого флажка.
то "graphs" построены, используя hidden, основанный на флажок checked свойства.

window.addEventListener('load', function () {
  // get checkboxes, add change event listener
  var checkboxes = document.getElementsByName('graph');
  Array.prototype.forEach.call(checkboxes, function(checkbox) {
    checkbox.addEventListener('change', drawChart);
  });

  // draw chart
  drawChart();

  function drawChart() {
    // build graphs
    var graphs = [];
    Array.prototype.forEach.call(checkboxes, function(checkbox) {
      graphs.push({
        "type": "line",
        "title": checkbox.value,
        "valueField": checkbox.value,
        hidden: !checkbox.checked
      });
    });

    // make chart
    var chart = AmCharts.makeChart("chart_div", {
      "type": "serial",
      "theme": "light",
      "dataProvider": [
        {"Date":"1/1/2017","Index I":13.80,"Index II":11.27,"Index III":8.75,"Index IV":12.30,"Index V":10.60,"Index VI":14.42},
        {"Date":"2/1/2017","Index I":15.49,"Index II":14.05,"Index III":6.26,"Index IV":13.37,"Index V":9.25,"Index VI":18.92},
        {"Date":"3/1/2017","Index I":16.51,"Index II":18.77,"Index III":3.22,"Index IV":18.02,"Index V":11.02,"Index VI":24.78},
        {"Date":"4/1/2017","Index I":20.36,"Index II":22.35,"Index III":4.74,"Index IV":22.93,"Index V":7.69,"Index VI":20.99},
        {"Date":"5/1/2017","Index I":25.64,"Index II":24.02,"Index III":1.09,"Index IV":19.08,"Index V":13.39,"Index VI":25.43},
        {"Date":"6/1/2017","Index I":22.21,"Index II":21.83,"Index III":6.15,"Index IV":23.07,"Index V":16.72,"Index VI":23.14},
        {"Date":"7/1/2017","Index I":18.81,"Index II":23.23,"Index III":5.21,"Index IV":19.67,"Index V":13.97,"Index VI":25.71},
        {"Date":"8/1/2017","Index I":21.98,"Index II":19.23,"Index III":11.10,"Index IV":17.73,"Index V":14.70,"Index VI":31.29},
        {"Date":"9/1/2017","Index I":18.10,"Index II":25.12,"Index III":7.33,"Index IV":19.89,"Index V":20.07,"Index VI":36.57},
        {"Date":"10/1/2017","Index I":18.30,"Index II":25.56,"Index III":13.22,"Index IV":17.05,"Index V":16.68,"Index VI":39.10},
        {"Date":"11/1/2017","Index I":22.17,"Index II":25.02,"Index III":16.85,"Index IV":15.03,"Index V":19.65,"Index VI":43.62},
        {"Date":"12/1/2017","Index I":22.74,"Index II":25.02,"Index III":18.35,"Index IV":12.48,"Index V":24.32,"Index VI":43.62}
      ],
      "graphs": graphs,  // <-- add graphs array here
      "categoryField": "Date",
      "legend": {}
    });
  }
});

label {
  cursor: pointer;
}

.select {
  white-space: nowrap
}

#chart_div {
  height: 260px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div>Select Graphs</div>
<div class="select">
  <input type="checkbox" name="graph" id="graph-0" value="Index I" checked />
  <label for="graph-0">Index I</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-1" value="Index II" checked />
  <label for="graph-1">Index II</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-2" value="Index III" checked />
  <label for="graph-2">Index III</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-3" value="Index IV" />
  <label for="graph-3">Index IV</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-4" value="Index V" checked />
  <label for="graph-4">Index V</label>
  <span>|</span>
  <input type="checkbox" name="graph" id="graph-5" value="Index VI" />
  <label for="graph-5">Index VI</label>
</div>
<div id="chart_div"></div>

Потрясающие. Именно то, что я искал.