我对此完全陌生，并且在使用 NVD3 图表时遇到问题。我希望我能找到一些帮助，因为这里似乎有人是这个主题的专家。
我正在尝试创建一个下拉框来选择要显示的数据。到目前为止，我已经能够使用 tesdata 变量内的默认 json 数据创建图表。我想添加一个选择框，可以在其中选择不同的数据(testdata1、testdata2、testdata3...)并相应地显示图表。我对此比较陌生，所以我什至不知道如何编写自定义函数来完成此类任务。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="nv.d3.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 90%;
width: 90%;
}
button {
margin: 2px;
margin-left: 80px;
}
</style>
</head>
<aside style="margin-top:80px;margin-left:250px;">
<p>Select by Test data: <select id="order">
<option value="testdata">by Test Data 1</option>
<option value="testdata2">by Test Data 2</option>
<option value="testdata3">by Test Data 3</option>
</select>
</aside>
<body>
<div style="position:absolute; top: 0; left: 0;">
<!--<button onclick="chart.switchYAxisOrder(!chart.switchYAxisOrder()); chart.update();">toggle axis</button>-->
<button onclick="chart.focusEnable(!chart.focusEnable()); chart.update();">toggle focus</button>
<span style="color: #C60;"><-- turn focus on or off!</span>
</div>
<div id="chart1" class='with-3d-shadow with-transitions'>
<svg> </svg>
</div>
<script>
var testdata = [
{
"key" : "Total-Employees",
"bar": true,
"values" : [ [946616400000 ,8063410] , [ 978238800000 , 7782680] , [ 1009774800000 , 7212360] , [ 1041310800000 , 7092460] , [ 1072846800000 , 6653480] , [ 1104469200000 , 6200940] , [ 1136005200000 , 5960560],[1167541200000,5892900],[1199077200000,6003930]]
},
{
"key" : "Annual-Pay",
"values" : [ [946616400000 , 80572] , [ 978238800000 , 82105] , [ 1009774800000 , 82936] , [ 1041310800000 , 90900] , [ 1072846800000 , 93292] , [ 1104469200000 , 93880], [1136005200000 , 93903],[1167541200000,94548],[1199077200000,96150]]
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart()
.margin({top: 50, right: 80, bottom: 30, left: 80})
.legendRightAxisHint(' [Using Right Axis]')
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
}).showMaxMin(false);
chart.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
chart.bars.forceY([0]).padData(false);
chart.x2Axis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
}).showMaxMin(false);
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
</script>
</body>
</html>
感谢任何帮助!
最佳答案
您只需更新您的 testdata 变量，然后执行以下几行:
d3.select('#chart1 svg')
.datum(testdata);
chart.update();
演示
var datasets = {}
var chart;
function generateDatasets() {
for (var i = 1; i <= 3; i++) {
values = [];
for (var j = 0; j < 50; j++) {
values.push({
x: Math.random() * 100,
y: Math.random() * 100
});
}
var dataset = [{
key: "Dataset " + i,
values: values
}];
datasets["Dataset" + i] = dataset;
}
}
function initializeGraph(callback) {
nv.addGraph(function(callback) {
chart = nv.models.scatterChart();
d3.select('#chart svg')
.datum([])
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
}, callback);
}
function showDataset(dataset) {
d3.select('#chart svg')
.datum(dataset);
chart.update();
}
$("#dataset").change(function() {
var value = $("#dataset").val();
showDataset(datasets[value]);
});
generateDatasets();
initializeGraph(function() {
showDataset(datasets.Dataset1);
});#chart {
height: 500px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dataset">
<option value="Dataset1">Dataset 1</option>
<option value="Dataset2">Dataset 2</option>
<option value="Dataset3">Dataset 3</option>
</select>
<div id="chart">
<svg></svg>
</div>关于javascript - 添加NVD3图表的选择框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36355261/