Question

我正在尝试创建累积折线图。

但我现在对nvd3或d3了解不多。

那么我在这里失踪了什么？

我创建了jsfiddle，

我的数据是

var lineChartData = [
      {
        key : "Passed",
        values :[
          { x : "Module A", y : 10},
          { x : "Module B", y : 12},
          { x : "Module C", y : 14},
          { x : "Module D", y : 2}
        ]
      },
      {
        key : "Failed",
        values :[
          { x : "Module A", y : 2},
          { x : "Module B", y : 3},
          { x : "Module C", y : 0},
          { x : "Module D", y : 4}
        ]
      }
    ];

我的图表代码是这样的

nv.addGraph(function() {
      var chart = nv.models.cumulativeLineChart();



      var d3chart = d3.select('#chart svg')
          .datum(lineChartData)
          .transition().duration(500)
          .call(chart);


      nv.utils.windowResize(chart.update);

      return chart;
    });

我不知道如何将字符串放在xAxis＆＃34;模块A＆＃34;，＆＃34;模块B＆＃34;和其他模块只作为字符串。

将有两行＆＃34;通过＆＃34;和＆＃34;失败＆＃34;。

我需要进行哪些设置才能获得图表。

Answer 1

我认为您需要像这样格式化x xAx：

chart.xAxis.axisLabel（＆＃34; Modules＆＃34;）。tickFormat（function（d）{return lineChartData [0] .values [d] .x;}）;

累积折线图错误nvd3

1 个答案: