Question

我试图显示Stacked nvd3js图表（http://nvd3.org/examples/stackedArea.html）并继续收到此错误：

state.disabled = data.map（function（d）{return !! d.disabled}）;

堆叠... hart.js（第87行，第6栏））

我的json示例：

var data = [
    {
"key":"Key1","values":
[[1009756800000,858666000],
[1041292800000,910926000],
[1072828800000,1073489000],
[1104451200000,1333281000],
[1135987200000,2168985000],[
1167523200000,3185387000],
[1199059200000,3303486000],
[1230681600000,4372067000],
[1262217600000,8688161000],
[1293753600000,12189267000],
[1325289600000,16442852000],
[1356912000000,18622678000],
[1009756800000,2551000],
[1041292800000,2484000],
[1072828800000,2416000], 
]
} 
,
{
"key":"Key2","values":
[[1104451200000,9348000],
[1135987200000,12642000],
[1167523200000,12127000],
[1199059200000,11661000],
[1230681600000,33554000],
[1262217600000,32146000],
[1293753600000,30462000],
[1325289600000,177327000],
[1356912000000,177882000],
[1009756800000,0],
[1041292800000,0],
[1072828800000,0],
[1104451200000,0],
[1135987200000,0],
[1167523200000,0], 
] 
} 
,
{
"key":"Key3","values":
[[1009756800000,185679000],
[1041292800000,236607000],
[1072828800000,150931000],
[1104451200000,323469000],
[1135987200000,281266000],
[1167523200000,309607000],
[1199059200000,557171000],
[1230681600000,787080000],
[1262217600000,1084286000],
[1293753600000,1129885000],
[1325289600000,1420153000],
[1356912000000,3315623000],
[1009756800000,193891000],
[1041292800000,253113000],
[1072828800000,296447000], 
] 
}
];

和nvd3js代码：

//NVd3js
function defaultChartConfigBS(container, data, useGuideline) {
  if (useGuideline === undefined) useGuideline = true;
  nv.addGraph(function() {
    var chart;
    chart = nv.models.stackedAreaChart()
                  .useInteractiveGuideline(useGuideline)
                  .x(function(d) { return d[0] })
                  .y(function(d) { return d[1] })
                  .useInteractiveGuideline(true)    //Tooltips which show all data points. Very nice!
                  .rightAlignYAxis(false)      //Let's move the y-axis to the right side.
                  .transitionDuration(500)
                  .showControls(true)       //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
                  .clipEdge(true)
                    ;

    chart.xAxis
        .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });


    chart.yAxis
        .tickFormat(d3.format(',.2f'));

    d3.select('#' + container + ' svg')
          .datum(data)
           // .datum( [data()[0].values] ) tried the hack from stack - didnt help
        .transition().duration(20).call(chart);

    nv.utils.windowResize(chart.update);


    return chart;
  });
}

Answer 1

在nvd3js代码中：

而不是

chart = nv.models.stackedAreaChart()
              .useInteractiveGuideline(useGuideline)
              .x(function(d) { return d[0] })
              .y(function(d) { return d[1] })
              .useInteractiveGuideline(true)    //Tooltips which show all data points. Very nice!
              .rightAlignYAxis(false)      //Let's move the y-axis to the right side.
              .transitionDuration(500)
              .showControls(true)       //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
              .clipEdge(true)
                ;

您可以使用：

chart = nv.models.stackedAreaWithFocusChart();
                         chart.width(600).height(500)                            
                         .x(function (d) {
                             return d[0]
                         })
                         .y(function (d) { return d[1] })
                         .color(keyColor);

和aslo insted of

  d3.select('#' + container + ' svg')
      .datum(data)
       // .datum( [data()[0].values] ) tried the hack from stack - didnt help
    .transition().duration(20).call(chart)

您可以使用：

d3.select('#' + container + ' svg')
                 .datum(data)
               .call(chart);

Nvd3js - TypeError：data.map不是函数

1 个答案: