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

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

1 个答案: