选择NVD3图表的数据

Select data for NVD3 chart

本文关键字：数据 NVD3 选择      更新时间：2023-09-26

我是一个新手，在NVD3上遇到了麻烦，这里有一些聪明的人，所以我希望你能帮助我。

我试图创建一个下拉框，将选择数据显示。我可以调用函数，但是我不能让图表改变它的数据位置。

HTML: 

<select name="slct" id="name" onchange="data(this.value)">
<option>Select power data</option>
<option value="Residence_supply_data">Average kwh residences supplied to the grid</option>
<option value="Residence_need_data">Average kwh supplied to residences</option>
</select>

注意:我已经用上面的值作为名字创建了JSON库。

Javascript: 

function data(value) {
    console.log(value);
    var dat_select = value;
    return dat_select;
};
var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarHorizontalChart().x(function(d) {
        return d.label
    }).y(function(d) {
        return d.value
    }).margin({
        top : 30,
        right : 105,
        bottom : 30,
        left : 100
    })
    //.showValues(true)
    .tooltips(true).barColor(d3.scale.category20().range()).showControls(false);
    chart.yAxis.tickFormat(d3.format(',.0f'));
    d3.select('#chart1 svg').datum(dat_select).transition().duration(1000).call(chart);
    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) {
        nv.log('New State:', JSON.stringify(e));
    });
    return chart;
});

一切正常，函数记录结果，只是不能选择我需要的数据。如果我设置d3.select('#chart1 svg').datum(Residence_supply_data)，它将加载该数据。

在d3.slect('#chart1 svg')赋值给变量(全局变量)的点

myChart = d3.select('#chart1 svg').datum(dat_select).transition()
            .duration(1000).call(chart);

所以现在myChart包含nvd3 multiBarHorizontalChart()图表。

所以当你想通过调用function updateMyChart()来更新图表时，例如从你选择的地方，你可以这样更新它:

function updateMyChart() {
    // myChart is passed to your new data
    // myChart also calls chart which hold the attributes you 
    // had set earlier for multiBarHorizontalChart
    myChart.datum(Residence_supply_data).transition().duration(1000).call(chart);
    // Update the chart during the window screen resizing
    nv.utils.windowResize(myChart.update);
}

相关文章：