时间戳

首页 > 解决方案 > C3图表如何设置json数据格式以在图表上显示动态数据

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

问题描述

嗨，我正在使用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 值没有改变

标签： javascriptjqueryjsond3.jsc3.js

解决方案

发生这种情况是因为当您获取 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。明智地使用它。

看到它在这里工作

推荐阅读