添加NVD3图表的选择框

Add a selection box for NVD3 chart

本文关键字：选择 NVD3 添加更新时间：2023-11-20

我对此完全陌生，并且在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;">&lt;-- 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();

Demo

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>