C3图表如何设置json数据格式以在图表上显示动态数据

Question

您好，我正在使用c3 图表，这里是jsfiddle，为此我需要根据点击按钮显示内容。例如，有四个按钮，就像7Day，当我点击它时，它将显示从当前日期开始的最近 7 天的统计信息。在这个小提琴中，我放置了静态数据，它工作正常，但是当我设置一个 json 并通过 jquery 获取它时，它就不能正常工作了。

点击“7 天”按钮，图表再次加载并显示我正在这样做的数据

$("#days").click(function () {
      var sevenday = JSON.parse($("#sevenday").html());
      var sevenday = JSON.stringify(sevenday[0]);

      console.log(sevenday);
      chart.load({
          columns: [
              ['x',"Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
              ['Sales', 23000, 19000, 13000, 15000, 13000, 14000, 20000],
              ['Units', 15000, 22000, 21000, 14000, 15000, 20500, 25000]
          ]
      });
      $(".dash-btn-group .btn").removeClass("active");
      $(this).addClass("active");
  });

正如你所看到的，我在 jquery 中输入了值，所以当我通过 json 设置数据并在 jQuery 中获取数据时它工作正常，然后它什么都不做休息你可以在小提琴中看到。

    <span style="display:none" id="days">['x',"Mon","Tue","Wed","Thu","Fri","Sat","Sun"]</span>  

 $("#days").click(function () {
  var days = $("#days").html();
      chart.load({
          columns: [
              days,
              ['Sales', 23000, 19000, 13000, 15000, 13000, 14000, 20000],
              ['Units', 15000, 22000, 21000, 14000, 15000, 20500, 25000]
          ]
      });
      $(".dash-btn-group .btn").removeClass("active");
      $(this).addClass("active");
  });

当我们点击7 Day按钮时，你可以看到xaxis值没有改变

Answer 1

这是因为当您获取 html 值时，您将其作为字符串获取，并且图表加载方法期望它作为对象。调试时似乎相同（在警报或 console.logs 上，但事实并非如此）。有一个简单（但不安全）的修复方法可以让 JavaScript 计算表达式并使用 eval 将其解析为 JavaScrpt 源代码。 只需将您的加载方法替换为：

$("#days").click(function () {
  var days = $("#days").html();
      chart.load({
          columns: [
              eval(days),
              ['Sales', 23000, 19000, 13000, 15000, 13000, 14000, 20000],
              ['Units', 15000, 22000, 21000, 14000, 15000, 20500, 25000]
          ]
      });
      $(".dash-btn-group .btn").removeClass("active");
      $(this).addClass("active");
  });

现在图表加载方法可以按照预期正确理解您的“天数”。

谨慎使用 eval，这不是一个好的选择。我们在这里使用它而不是 JSON.parse 或其他 JSON 方法，因为在这种情况下 days 不是有效的 JSON。明智地使用它。

See it working here