Question

我试图尝试自己的nvd3散点图示例。我没有收到任何错误，但图表没有填充。

当我试图进入屏幕时，我有一个空白的网页。即使我现有的其他内容也不见了。有没有人设法让散点图正常运行？如果你能分享一个有效的例子我真的很感激。

#html
<script>            
    $(document).ready(function(){           

        nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)    //showDist, when true, will display those little distribution lines on the axis.
                .showDistY(true)

                .color(d3.scale.category10().range());   

  //Axis settings
  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));



  var myData = randomData(4,40);
  d3.select('#chart svg')
      .datum(myData)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

    /**************************************
 * Simple test data generator
 */
function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random()
      , y: random()
      , size: Math.random()   //Configure the size of each scatter point
      , shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle"  //Configure the shape of each scatter point.
      });
    }
  }

  return data;
}

    });

Answer 1

无论您的图形有多简单，它都不会显示。也许它只是与新版本的python不兼容。我正在使用python 3.6

根据谷歌的开发工具，它生成代码，所有css和j都正常工作。但是，它仍然没有显示出来。

data_piechart_container=[
    {"values": [
      {"label": "Apple", "value": 52}, 
      {"label": "Apricot", "value": 48}, 
      {"label": "Avocado", "value": 160}, 
      {"label": "Banana", "value": 94}, 
      {"label": "Boysenberries", "value": 75}, 
      {"label": "Blueberries", "value": 71}, 
      {"label": "Dates", "value": 490},
      {"label": "Grapefruit", "value": 82}, 
      {"label": "Kiwi", "value": 46}, 
      {"label": "Lemon", "value": 17}
     ], "key": "Serie 1"}];

nv.addGraph(function() {
    var chart = nv.models.pieChart();
    chart.margin({top: 30, right: 60, bottom: 20, left: 60});
    var datum = data_piechart_container[0].values;

    chart.color(d3.scale.category20().range());

chart.tooltipContent(function(key, y, e, graph) {
    var x = String(key);
        var y = String(graph.point.y);
        tooltip_str = '<center><b>'+x+'</b></center>' + y;
        return tooltip_str;
    });
    chart.showLabels(true);

        chart.donut(false);

chart.showLegend(true);

chart
    .x(function(d) { return d.label })
    .y(function(d) { return d.value });
chart.height(450);

d3.select('#piechart_container svg')
    .datum(datum)
    .transition().duration(500)
    .attr('height', 450)
    .call(chart);
});

NVD3散点图未显示

1 个答案: