Как отобразить данные на графике в зависимости от выпадающего значения, используя anychart js? - PullRequest
Новая
       57

Как отобразить данные на графике в зависимости от выпадающего значения, используя anychart js?

0 голосов
/ 16 марта 2020

Я пытаюсь использовать anychart js для построения графика. Данные, отображаемые на этом графике, являются данными, предоставленными API, и касаются статистики игроков NBA. Он предоставляется в формате JSON. Поэтому я хочу установить данные в зависимости от того, что я выбрал в раскрывающемся списке.

Например, если я выберу атрибут fga в раскрывающемся списке, он будет отображать линейный график с данными fga. Если выбрать, то fgm удалит текущую линейную диаграмму и отобразит другую с fgm в качестве данных.

Вот мой запрос к API: https://www.balldontlie.io/api/v1/stats?seasons [] = 2019 & player_ids [] = 237 & per_page = 100

Вот веб-сайт: https://www.balldontlie.io

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

Вот мой код: 

var vm = new Vue({
    el:'#app',
    data : {
        choice : "",
        stat : []


},

    methods: {
        statSelect : function(event){
                return axios.get("https://www.balldontlie.io/api/v1/stats?seasons[]=2019&player_ids[]=237&per_page=100")
                  .then(response => {
                  var tab = response.data.data.map((item) => {
                var date = new Date(item.game.date);
                var dateN = date.toLocaleString('en-US',
                {year : 'numeric', month : 'numeric', day: 'numeric'});
                if (event.target.value == "fga") {

                    this.stat.push([dateN, item.fga]);
              var chart = anychart.line();
              var serie = chart.line(this.stat);
              chart.yScale().minimum(0);
              chart.container("container");
              chart.draw();
                    console.log(this.stat);
                }

                if (event.target.value == "fta") {
                    stat = [dateN, item.fta];

                    console.log(stat);
                }

                else {
                           stat = [dateN, item.ftm];

                    console.log(stat);                  }

                 });
                return stat;
                });
        }
    }})

И вот результат: enter image description here

С уважением

YT

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Чтобы применить новые данные к серии, нет необходимости заново создавать диаграмму или даже серию. Вы можете просто применить новые данные к существующей серии: 

// create series
var series = chart.line(initialData);
// apply new data
series.data(newData);
0 голосов
/ 16 марта 2020

Если я правильно понимаю, что вы пытаетесь сделать, вот пример того, как вы будете делать это в ванили javascript. 

window.addEventListener('DOMContentLoaded', function() {
  //fetch the data
  const url = "https://www.balldontlie.io/api/v1/stats?seasons[]=2019&player_ids[]=237&per_page=100";
  const dataPromise = axios.get(url)
    .then(response => response.data.data)
    .catch(reason => alert('GET failed. ' + reason));
  
  //init chart
  const chart = anychart.line();
  chart.defaultSeriesType('line');
  
  //keep chart updated to match dropdown
  const selectElem = document.querySelector('select');
  selectElem.addEventListener('change', event => {
    showChartFor(event.target.value);
  });
  showChartFor(selectElem.value);

  function showChartFor(key) {
    dataPromise.then(data => {
      const series = data.map(item => {
        const date = new Date(item.game.date);
        const dateN = date.toLocaleString('en-US', {
          year: 'numeric',
          month: 'numeric',
          day: 'numeric'
        });
        return [dateN, item[key]];
      });

      chart.removeAllSeries();
      chart.addSeries(series);
      chart.container('container');
      chart.draw();
    });
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" type="text/javascript"></script>
</head>
<body>
  <select>
    <option value="fga">fga</option>
    <option value="fta">fta</option>
    <option value="ftm">ftm</option>
  </select>
  <div id="container"></div>
</body>
</html>
...