Chart Js使用下拉列表更新数据集

Question

好的，我的网站上有一个chart.js。现在，我尝试使用下拉菜单在不同的数据集之间进行切换。我得到了一个canvas.js图表​​的示例，并尝试根据我的需要进行更改。但我很难做到，因为我不明白如何用图表来做。有人可以告诉我如何正确地做到这一点？

这是我已经得到的：

落下：

<select class="form-control browser-default dropdown" id="dd">
    <option value="" selected="selected">Select Serial Number</option>
    <option value="dps1">DataPoints 1</option>
    <option value="dps2">DataPoints 2</option>
    <option value="dps3">DataPoints 3</option>
    <option value="dps4">DataPoints 4</option>
    <option value="dps5">DataPoints 5</option>
</select>
<canvas id="myChart2"></canvas>

使用Javascript：

var jsonData = {
    "dps1": [
        { "x": "2016-6-25 12:58:52", "y": 10.22 },
        { "x": "2016-7-25 13:33:23", "y": 11.14 },
        { "x": "2016-8-25 13:49:18", "y": 13.58 },
        { "x": "2016-9-25 13:55:01", "y": 15.25 },
        { "x": "2016-10-25 14:00:15", "y": 17.25 },
    ],
    "dps2": [
        { "x": "2016-6-25 12:58:52", "y": 19.99 },
        { "x": "2016-7-25 13:33:23", "y": 21.78 },
        { "x": "2016-8-25 13:49:18", "y": 23.45 },
        { "x": "2016-9-25 13:55:01", "y": 24.73 },
        { "x": "2016-10-25 14:00:15", "y": 26.58 }
    ],
    "dps3": [
        { "x": "2016-6-25 12:58:52", "y": 27.66 },
        { "x": "2016-7-25 13:33:23", "y": 28.68 },
        { "x": "2016-8-25 13:49:18", "y": 30.73 },
        { "x": "2016-9-25 13:55:01", "y": 32.46 },
        { "x": "2016-10-25 14:00:15", "y": 34.79 }
    ],
    "dps4": [
        { "x": "2016-6-25 12:58:52", "y": 10.22 },
        { "x": "2016-7-25 13:33:23", "y": 11.14 },
        { "x": "2016-8-25 13:49:18", "y": 15.25 },
        { "x": "2016-9-25 13:55:01", "y": 19.99 },
        { "x": "2016-10-25 14:00:15", "y": 21.78 }
    ],
    "dps5": [
        { "x": "2016-6-25 12:58:52", "y": 24.73 },
        { "x": "2016-7-25 13:33:23", "y": 26.58 },
        { "x": "2016-8-25 13:49:18", "y": 27.66 },
        { "x": "2016-9-25 13:55:01", "y": 28.68 },
        { "x": "2016-10-25 14:00:15", "y": 32.46 }
    ]}



var dataPoints = [];
var ctx = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: <?php echo json_encode($json1); ?>,
        datasets: [{
            label: "My First dataset",
            borderColor: 'rgb(255, 99, 132)',
            data: dataPoints,
        }]
    },

    // Configuration options go here
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }
    }
});

$( ".dropdown" ).change(function() {
    chart.data.datasets.data = [];
    var e = document.getElementById("dd");
    var selected = e.options[e.selectedIndex].value;
    dps = jsonData[selected];
    for(var i in dps) {
        chart.data.datasets.data.push({x: dps[i].x, y: dps[i].y});
    }
    chart.update();
});

注意：<?PHP echo json_encode($json1); ?>目前用于在x轴上设置数据。这些是约会。后来我计划用数据库中的值动态构建jsonData x和y值，但是现在，我很乐意让下拉列表使用这些静态值。

这是canvasjs的例子：canvasjs

Answer 1

使用这个好的教程：chart.js Tutorial（并将您的代码更改为chart.js方式）

通过下拉列表更改触发更改事件时，您必须调用

chart.update（）

使您对图表对象进行更改以呈现为HTML。

Answer 2

  var data = {
appleData : {
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.6)"
},
orangeData : {
  label: 'oranges',
  data: [2, 29, 5, 5, 2, 3, 10],
  backgroundColor: "rgba(255,153,0,0.6)"
}
}

var ctx = document.getElementById('myChart').getContext('2d');
function updatechart() {
var e = document.getElementById("dd");
var dd = e.options[e.selectedIndex].value;
var fruitData = {
  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
  datasets: [data[dd]] 
}
var myChart = new Chart(ctx, {
     type: 'line',
     data: fruitData
   });

  }