javascript - 如何使用anychart js以下拉值的功能在图表中显示数据？

Question

我正在尝试使用 anychart js 来制作折线图。此图表上显示的数据是从 api 提供的数据，涉及 nba 球员统计数据。它以 JSON 格式提供。所以我想要的是根据我在下拉列表中选择的功能设置数据。

例如，如果我在下拉列表中选择 fga 属性，那么它将显示以 fga 作为数据的折线图。如果选择 then 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;
                });
        }
    }})

这是结果：

问候

优酷

标签： javascriptarraysapichartsanychart

Answer 1

要将新数据应用于系列，无需重新创建图表甚至系列。您可以简单地将新数据应用于现有系列：

// create series
var series = chart.line(initialData);
// apply new data
series.data(newData);