Question

我正在尝试使用nvd3 JavaScript库绘制饼图。使用硬编码数据测试时，它工作正常。但我想要的是能够通过php和Ajax从服务器获取动态数据。这是不可能的。有人能指出我正确的方向吗？感谢

jquery的：

function chartdata() {
$.post('chartData.php', {
        id : $("#id").val(),
        theDate : $(".selectedDate").text()
    }, function(data) {
        var testdata = JSON.stringify(data);
        alert(testdata);
        console.log(testdata)

    }, 'json');

};

nvd3：

        nv.addGraph(function() {
            var width = 250, height = 250;
            var chart = nv.models.pieChart().x(function(d) {
                if (d.Code === "1") {
                    d.Code = "Good"
                } else if (d.Code === "2") {
                    d.Code = "Error"
                    }
                return d.Code;
            }).y(function(d) {
                return d.ReasonCount;
            }).width(width).height(height).showLabels(false).labelThreshold(.05)//Configure the minimum slice size for labels to show up
            .labelType("percent")//Configure what type of data to show in the label. Can be "key", "value" or "percent"
            .donut(true)//Turn on Donut mode. Makes pie chart look tasty!
            .donutRatio(0.45)//Configure how big you want the donut hole size to be.
            ;
            d3.select(".test2").datum(chartdata()).transition().duration(1200).attr('width', width).attr('height', height).call(chart);
            chart.dispatch.on('stateChange', function(e) {
                nv.log('New State:', JSON.stringify(e));
            });
            return chart;
        });

示例JSON：

 [{"Code":"1","ReasonCount":"8"},{"Code":"2","ReasonCount":"1"}, ]

Answer 1

我想我已经设法用条形图做你想做的事。对您来说可能有点晚了，但是从服务器获取了JSON对象变量后，诀窍是将其插入NVD3脚本中的正确位置。如果您从CSV文件中提取数据并绘制该数据，则如下所示：

function bar() {
  $(document).ready(function(){
    d3.csv("http://localhost/ERC/database/data.csv",function(err,data){             //reads the csv file for data.

      var dataToPlot = Object.keys(data[0]).filter(function(k){return k!="date"})       //gets the values as an object
        .map(function(k){
          return {"key":k,"values":data.map(function(d){                                //specifies the key/value pair
           return {
             "x":d.date,        //specifies x-axis values to use
             "y":+d[k]          //parses the y axis into a number
           }
          })
          };
        });
    //execute bar chart code
    });
});

我使用alert(JSON.stringify(JSON_object,null,4));来查看我的JSON对象需要插入代码的位置。基本上我所做的是删除调用csv文件的行，然后插入我的JSON对象（我将其作为“obj”传递）代替原始的“data”对象。您还需要确保修改键值名称。以下修改后的代码有效：

function bar(obj) {

  $(document).ready(function(){

      var dataToPlot = Object.keys(obj[0]).filter(function(k){return k!="PID"})         //gets the values as an object
        .map(function(k){
          return {"key":k,"values":obj.map(function(d){                                 //specifies the key/value pair
           return {
             "x":d.PID,                                                                 //specifies x-axis values to use
             "y":+d[k]                                                          //parses the y axis into a number
           }
          })
          };
        });
    })
}

希望这会有所帮助。我对编程比较陌生，我花了一些时间来解决这个问题。

如何将动态数据提取到nvd3图表

1 个答案: