NVD3散點圖不顯示

我試圖自己嘗試nvd3散點圖例子。我沒有收到任何錯誤，但圖表沒有填充。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; 
} 

    });

來源

2017-08-09 dickli2119

試着把你的代碼放在[fiddle]（https://jsfiddle.net/）中。它很容易調試和幫助你。 – shabeer90

聽起來像你可能有一個JS錯誤。你在控制檯中看到什麼？同意JSFiddle或Plunkr會有所幫助。 – jeznag

無所謂你的圖形很簡單，它只是不顯示。也許它只是與新版本的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); 
});

來源

2017-10-16 03:52:20

NVD3散點圖不顯示

回答

相關問題