javascript - 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

Hello world(最基本的例子)如下

这个 Q 的“解决方案”维泰利 是 不是 真的是其他用户的答案(没有代码示例，没有片段，没有额外的细节)。

想法 --> 点击后将数据更改为 index (0 表示数组的零索引数据)。

<button class="btn active" onclick="changeData(0)">Datasets 1</button>

/* js*/
dataset.label = dataObjects[index].label; /* change label value */

并运行 update() :
https://www.chartjs.org/docs/latest/developers/updates.html

更改数据 函数获取 索引 范围。很容易更改此代码以选择菜单(获取更改时选择菜单的索引):
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex

片段

var dataObjects = [
  {
    label: "Datasets 1",
    data: [8, 6, 4]
  },
  {
    label: "Datasets 2",
    data: [3, 5, 7]
  },
  {
    label: "Datasets 3",
    data: [11, 8, 12]
  }
]

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe"],
  datasets: [  {
    label:  dataObjects[0].label,
    data: dataObjects[0].data,
    /* global setting */
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)'
    ],
    borderWidth: 1
  }]
};

var options = {
  legend: {
    display: true,
    fillStyle: "red",
    
    labels: {
      boxWidth: 0,
      fontSize: 24,
      fontColor: "black",
    }
  },
  scales: {
    xAxes: [{
      stacked: false,
      scaleLabel: {
        display: true,
        labelString: 'Country'
      },
    }],
    yAxes: [{
      stacked: true,
      scaleLabel: {
        display: true,
        labelString: 'Millions'
      },
      ticks: {
        suggestedMin: 0,
        suggestedMax: 10
      }
    }]
  },/*end scales */
  plugins: {
    // datalabels plugin
    /*https://chartjs-plugin-datalabels.netlify.com*/
    datalabels: {
      color: 'black',
      font:{
        size: 25
      }
    }
  }
};

var chart = new Chart('chart-0', {
  plugins: [ChartDataLabels], /*https://chartjs-plugin-datalabels.netlify.com*/
  type: 'bar',
  data: data,
  options: options
});

function changeData(index) {
  chart.data.datasets.forEach(function(dataset) {
    dataset.label = dataObjects[index].label;
    dataset.data = dataObjects[index].data;
    //dataset.backgroundColor = dataObjects[index].backgroundColor;
  });
  chart.update();
}

/* add active class on click */
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #1a73e8;
  color: white;
}

<div id="myDIV">
  <button class="btn active" onclick="changeData(0)">Datasets 1</button>
  <button class="btn" onclick="changeData(1)">Datasets 2</button>
  <button class="btn" onclick="changeData(2)">Datasets 3</button>
</div>
<canvas id="chart-0"></canvas>

<hr>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

笔记:

数据标签的额外插件:** https://chartjs-plugin-datalabels.netlify.com

没有 Jquery

“Hello world”(如果数据或值存在则不进行任何验证)