Question

好的，我的网站上有一个chartjs。现在，我尝试使用下拉菜单在不同的数据集之间进行切换。我得到了canvasjs图表的示例，并尝试根据需要进行更改。但是我很难做到这一点，因为我不了解如何使用chartjs。有人可以告诉我如何正确执行操作吗？

这是我已经得到的：

下拉菜单：

<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

下面的Hello World（最基本的示例）

Vitelli 提出的此问题的“解决方案” 不是确实是其他用户的答案（没有代码示例，代码段，没有其他详细信息）。

想法->单击将数据更改为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

changeData 函数获取 index 参数。更改此代码以选择菜单非常容易（更改时获取选择菜单的索引）： 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”（如果存在数据或值，则不进行任何验证）

Answer 3

  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
   });

  }

Answer 4

HTML :

                                        <select class="form-control float-right " id="change_year" onchange="updateChart();" name="change_year" style="width:150px" required>
                                        <option value="2020">2020</option>
                                        <option value="2021" selected>2021</option>
                                    </select>

JS：

// Dummy Data for Year 2020 and 2021
var data = {
2020: {
    label: 'In this Month',
    backgroundColor: "rgba(0, 97, 242, 1)",
    hoverBackgroundColor: "rgba(0, 97, 242, 0.9)",
    borderColor: "#4e73df",
    data: [4215, 5812, 6251, 7841, 9821, 1484, 19000, 1020, 100, 3000, 5000, 1000]
},
2021: {
    label: 'In this Month',
    backgroundColor: "rgba(0, 97, 242, 1)",
    hoverBackgroundColor: "rgba(0, 97, 242, 0.9)",
    borderColor: "#4e73df",
    data: [4215, 5312, 6251, 7841, 9821, 14984, 19000, 1200, 15000, 5000, 6000, 20000]
}}



// Variable for Chart created Globally
var myBarChart;


function updateChart() {
var ctx = document.getElementById("yearlyBarChart");
var e = document.getElementById("change_year");
// Get the selected value of dropdown here
var dd = e.options[e.selectedIndex].value;
// Create dataset
var yearData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [data[dd]]
}
// Clear you chart before assiging new dataset
if (myBarChart !== undefined) {
    myBarChart.clear();
    myBarChart.destroy();
}

myBarChart = new Chart(ctx, {
    type: "bar",
    data: {
        labels: yearData.labels, //set labels
        datasets: yearData.datasets // set data for selected year
    },
    options: {
        maintainAspectRatio: false,
        layout: {
            padding: {
                left: 10,
                right: 25,
                top: 25,
                bottom: 0
            }
        },
        scales: {
            xAxes: [{
                time: {
                    unit: "month"
                },
                gridLines: {
                    display: false,
                    drawBorder: false
                },
                ticks: {
                    maxTicksLimit: 10
                },
                maxBarThickness: 25
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 20000,
                    maxTicksLimit: 5,
                    padding: 10,
                    // Include a dollar sign in the ticks
                    callback: function (value, index, values) {
                        return "$ " + number_format(value);
                    }
                },
                gridLines: {
                    color: "rgb(234, 236, 244)",
                    zeroLineColor: "rgb(234, 236, 244)",
                    drawBorder: false,
                    borderDash: [2],
                    zeroLineBorderDash: [2]
                }
            }]
        },
        legend: {
            display: false
        },
        tooltips: {
            titleMarginBottom: 10,
            titleFontColor: "#6e707e",
            titleFontSize: 14,
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            borderColor: "#dddfeb",
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: false,
            caretPadding: 10,
            callbacks: {
                label: function (tooltipItem, chart) {
                    var datasetLabel =
                        chart.datasets[tooltipItem.datasetIndex].label || "";
                    return datasetLabel + ": $ " + number_format(tooltipItem.yLabel);
                }
            }
        }
    }

});
// once you set new data, need to update the chart.
myBarChart.update();}

Chartsjs使用下拉列表更新数据集

4 个答案:

下面的Hello World（最基本的示例）

摘要