使用Button在带有chart.js的图表之间切换 [英] Switching between Charts with chart.js using Buttons

问题描述

我是初学者.我一直在尝试使用chartJS将一些数据显示到屏幕上.我希望能够单击一个按钮，该按钮将生成另一组新的数据/轴.

I am a beginner developer. I've been trying to use chartJS to get some data onto a screen. I'd like to be able to click a button that will generate another fresh set of data/axes.

我一直在尝试遵循其他堆栈溢出答案，但似乎没有一个对我有用...请参阅下文.

I've been trying to follow other stack overflow answers but none seem to work for me... please see below.

<canvas id="myChart"></canvas>
<canvas id="forecast" width="300" height="150"></canvas>
<button id="0" type="button" >Overall (Monthly)</button>
<button id="1" type="button" >Overall (Cumulative)</button>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
        label: "DataPoint1",       
        data: [1635063, 1324343, 1880284, 1609026, 1243755, 1680117],

      }, {
        label: "DataPoint2",            
        data: [962615, 1007211, 949080, 1109982, 902847, 1059045, 1191732, 1364279, 1244704, 1392971, 1352530, 1450456],
        borderDash: [10,5],           
        type: 'line'
      }, {
        label: "DataPoint3",
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: 'rgba(191, 63, 63, 0.9)',
        data: [1596798, 1468975, 1528036, 1612536, 1356639, 1512534, 1557276, 1609376, 1522568, 1387752, 1463280, 1562757],
        borderDash: [10,5],
        type: 'line'
      }],

},
    options: options

});

我正在寻找一种解决方案，如果单击一个按钮，它将生成具有不同数据集的新图形:目前，以上内容使我可以创建所有3个图形的组合，而不是单独的图形.我读过使用破坏"可以达到这个目标吗?非常感谢您的帮助.

I'm looking to find a solution where if I click on one button it will generate a fresh new graph with a different set of data: currently the above allows me to create a combined graph of all 3 rather than separated ones. I've read that using 'destroy' achieves this goal? Thanks a lot for the help.

推荐答案

关于本文档

https://www.chartjs.org/docs/latest/developers/updates.html

这就是我所做的，只是在单击时设置数据集，然后在最后更新图表

this is what I have done, just when click happens, set the datasets then update the chart at the end

<canvas id="myChart"></canvas>
<canvas id="forecast" width="300" height="150"></canvas>
<button id="0" type="button">Overall (Monthly)</button>
<button id="1" type="button">Overall (Cumulative)</button>

<!-- Add jQuery lib here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: "DataPoint1",
                data: [1635063, 1324343, 1880284, 1609026, 1243755, 1680117],

            }, {
                label: "DataPoint2",
                data: [962615, 1007211, 949080, 1109982, 902847, 1059045, 1191732, 1364279, 1244704, 1392971, 1352530, 1450456],
                borderDash: [10, 5],
                type: 'line'
            }, {
                label: "DataPoint3",
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: 'rgba(191, 63, 63, 0.9)',
                data: [1596798, 1468975, 1528036, 1612536, 1356639, 1512534, 1557276, 1609376, 1522568, 1387752, 1463280, 1562757],
                borderDash: [10, 5],
                type: 'line'
            }],

        },
    });

    // using jQuery with es5 syntax
    $('#0').on('click', function (e) {
        e.preventDefault;
        chart.config.data = {
            labels: ['June', 'December', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: "DataPoint1",
                data: [1680117, 1324343, 1324343, 1609026, 1243755, 1609026],

            }, {
                label: "DataPoint2",
                data: [1609376, 1007211, 949080, 1109982, 1528036, 1059045, 1191732, 1059045, 1244704, 1392971, 1352530, 1450456],
                borderDash: [10, 5],
                type: 'line'
            }, {
                label: "DataPoint3",
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: 'rgba(191, 63, 63, 0.9)',
                data: [1596798, 1356639, 1528036, 1609026, 1609376, 949080, 1557276, 1609376, 1522568, 1387752, 1463280, 1562757],
                borderDash: [10, 5],
                type: 'line'
            }],
        }
        chart.update();
    });

    // using pure js but with es6 syntax
    document.getElementById("1").addEventListener('click', () => {
        chart.config.data = {
            labels: ['June', 'December', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [{
                label: "DataPoint1",
                data: [1680117, 1324343, 1324343, 1609026, 1243755, 1609026],

            }, {
                label: "DataPoint2",
                data: [949080, 1007211, 949080, 1109982, 902847, 1059045, 1191732, 1059045, 1244704, 1392971, 1352530, 1450456],
                borderDash: [10, 5],
                type: 'line'
            }, {
                label: "DataPoint3",
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: 'rgba(191, 63, 63, 0.9)',
                data: [1596798, 1356639, 1528036, 1612536, 1609376, 1512534, 1557276, 1609376, 1522568, 1387752, 1463280, 1562757],
                borderDash: [10, 5],
                type: 'line'
            }],
        }
        chart.update();
    });
</script>

现在加载页面，然后点击总体(每月)按钮

now load the page then click on the Overall (Monthly) button

希望这会有所帮助

P.S.我只是为所有三个图表设置新值.如果您想一次制作一张图表.每次点击即可将数据替换为一个

P.S. I am just setting new values to all three charts. If you are thinking of having one chart at a time. Just replace the data with one each time there is a click

这篇关于使用Button在带有chart.js的图表之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！