ECharts - 设置外部加载数组的选项

时间:2016-01-18 22:33:54

标签: javascript jquery json charts echarts

所以我使用库ECharts为我在网站上提供的各种数据创建一些图表和图形。这是我第一次使用该库,我对Javascript / jQuery相当新。我想要做的是将xAxis数据设置为本地页面的结果,该页面将返回一个JSON对象,其中包含一个包含星期几的数组。在我这样做之后,我计划以相同的方式加载Series数据。

返回的jSON是

enter image description here

当我尝试为xAxis设置数据时,我正如图所示

xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: function(){
        $.ajax({
            type: "POST",
            url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
            cache: false,
            success: function(result){
                return result.data;
                //console.log(result.data);
            }
        });
    }

}],

但是,我一直收到错误 Uncaught TypeError:o.slice不是函数,当我尝试使用这种设置数据的方法时,只会输出此错误。除此之外,如果我尝试创建一个从外部页面返回数据并将变量设置为该函数的函数,每当我尝试将其打印到控制台时,它都会显示 undefined

如果我不使用我尝试加载外部数据的方法而且我预定义了这样的数据

xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: [
        'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]
}]

然后没有错误,它可以正常工作

有人能看到问题吗?

2 个答案:

答案 0 :(得分:1)

似乎在与某些人交谈后,唯一可用的示例用法或文档是这个示例,它们与我的问题here密切相关。

如果其他人想要一些与ajax相关的示例或使用ECharts加载动态数据,那么这里有一些(英文) *

有用提示

如果您不会说中文,而您正在使用某种翻译来代码示例;请注意,Google TranslateBing Translator等网站通过执行以下操作错误地翻译JS中使用的标点符号

  • 使用单引号将数组转换为带有单引号双引号的数组:从而导致语法错误。
  • 从对象中删除逗号(,)。
  • 将分号(;)更改为冒号(:),甚至删除它们。

答案 1 :(得分:1)

echarts从Ajax调用推送数据的完整示例

data.importPorts - >字符串数组 data.importBD - >对象数组{clientanem:[4,5,6,7,3]}

$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
          .done(function (data) {
              var option = {
                  tooltip: {
                      show: true
                  },
                  legend: {
                      data: (function () {
                          var res = [];
                          for (var name in data.importBD) {
                              res.push(name);
                          };
                          return res;
                      })()
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: (function () {
                              var res = [];
                              data.importPorts.forEach(function (i) {
                                  res.push(i);
                              });
                              return res;
                          })()
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value'
                      }
                  ],
                  series: [
                      {

                      }
                  ]
              };

              for (var name in data.importBD) {
                  var obj = {
                      name: name,
                      type: "bar",
                      data: data.importBD[name]
                  };

                  option.series.push(obj);

              }
              // Load data into the ECharts instance
              imprtChart.setOption(option);
          });