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

您好，我正在使用

c3

图表，这是我需要根据单击按钮显示内容的方法。例如，有四个按钮类似于

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中获取数据时，它工作正常，然后它就不做任何事情了，您可以在fiddle中看到

    <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");
  });

['x'、“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]
$（“#天”）。单击（函数（）{
var days=$（“#days”）.html（）；
图表.负荷({
栏目：[
天，
[‘销售’、23000、19000、13000、15000、13000、14000、20000]，
[‘单位’、15000、22000、21000、14000、15000、20500、25000]
]
});
$（“.dash btn group.btn”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});

---

当我们点击

7day

按钮时，您可以在“不改变”中看到xaxis值，这是因为当您获取html值时，它是一个字符串，而图表加载方法希望它是一个对象。当您调试它时（在alerts或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。明智地使用它

---

首先感谢您的回复。我找到了一个解决方案

var sevenday=JSON.parse（$（“#sevenday”）.html（）这就是我在获取数据时所做的，并表明我正在做的
sevenday[0]
对我来说很好