Fatal编程技术网
  • javascript/
  • Javascript 使用按钮在具有chart.js的图表之间切换

Javascript 使用按钮在具有chart.js的图表之间切换

javascript chart.js

Javascript 使用按钮在具有chart.js的图表之间切换,javascript,chart.js,Javascript,Chart.js,我是一个初学者开发人员。我一直在尝试使用chartJS在屏幕上显示一些数据。我希望能够单击一个按钮，生成另一组新的数据/轴 我一直在尝试遵循其他堆栈溢出的答案，但似乎没有一个适合我。。。请看下面 <canvas id="myChart"></canvas> <canvas id="forecast" width="300" height="150"></canvas> <button id="0" type="button" >Over

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

我一直在尝试遵循其他堆栈溢出的答案，但似乎没有一个适合我。。。请看下面

<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

});


整体（每月）
总体（累积）
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：{
标签：[“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
标签：“数据点1”，
数据：[1635063132431880284160902612437551680117]，
}, {
标签：“数据点2”，
数据：[962615100721194908011099829028471059045119173213642791244704139297113525301450456]，
borderDash:[10,5]，
类型：“行”
}, {
标签：“数据点3”，
背景颜色：“rgba（255，255，255，0.9）”，
边框颜色：“rgba（191,63,63,0.9）”，
数据：[1596798、1468975、1528036、1612536、1356639、1512534、1557276、1609376、1522568、1387752、1463280、1562757]，
borderDash:[10,5]，
类型：“行”
}],
},
选项：选项
});

我正在寻找一个解决方案，如果我点击一个按钮，它将生成一个新的具有不同数据集的图形：目前，上述允许我创建所有3个图形的组合图，而不是单独的图形。我读过，使用“销毁”可以实现这个目标吗？非常感谢您的帮助。

关于此文档

这就是我所做的，当点击发生时，设置数据集，然后在最后更新图表

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


整体（每月）
总体（累积）
const ctx=document.getElementById（'myChart'）.getContext（'2d'）；
常量图表=新图表（ctx{
类型：'bar'，
数据：{
标签：[“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
标签：“数据点1”，
数据：[1635063132431880284160902612437551680117]，
}, {
标签：“数据点2”，
数据：[962615100721194908011099829028471059045119173213642791244704139297113525301450456]，
borderDash:[10,5]，
类型：“行”
}, {
标签：“数据点3”，
背景颜色：“rgba（255，255，255，0.9）”，
边框颜色：“rgba（191,63,63,0.9）”，
数据：[1596798、1468975、1528036、1612536、1356639、1512534、1557276、1609376、1522568、1387752、1463280、1562757]，
borderDash:[10,5]，
类型：“行”
}],
},
});
//使用带有es5语法的jQuery
$（'0'）。在（'click'，函数（e）上{
e、 防止违约；
chart.config.data={
标签：[“六月”、“十二月”、“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
标签：“数据点1”，
数据：[1680171132434313243160902612437551609026]，
}, {
标签：“数据点2”，
数据：[16093761007211194908011099821528036105904511917321059041244704139297113525301450456]，
borderDash:[10,5]，
类型：“行”
}, {
标签：“数据点3”，
背景颜色：“rgba（255，255，255，0.9）”，
边框颜色：“rgba（191,63,63,0.9）”，
数据：[1596798、1356639、1528036、1609026、1609376、949080、1557276、1609376、1522568、1387752、1463280、1562757]，
borderDash:[10,5]，
类型：“行”
}],
}
chart.update（）；
});
//使用纯js但使用es6语法
document.getElementById（“1”）.addEventListener（'click'，（）=>{
chart.config.data={
标签：[“六月”、“十二月”、“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
标签：“数据点1”，
数据：[1680171132434313243160902612437551609026]，
}, {
标签：“数据点2”，
数据：[94908010072119490801109982902847105904511917321059041244704139297113525301450456]，
borderDash:[10,5]，
类型：“行”
}, {
标签：“数据点3”，
背景颜色：“rgba（255，255，255，0.9）”，
边框颜色：“rgba（191,63,63,0.9）”，
数据：[1596798、1356639、1528036、1612536、1609376、1512534、1557276、1609376、1522568、1387752、1463280、1562757]，
borderDash:[10,5]，
类型：“行”
}],
}
chart.update（）；
});
现在加载页面，然后单击
总体（每月）
按钮

希望这有帮助

另外，我只是给这三张图表设置了新的值。如果你正在考虑一次制作一张图表。只需在每次单击时将数据替换为一个，您要做的是只向图表提供希望图表一次显示的数据。因此，如果要在两个不同的视图之间切换，请将这些视图的数据创建为单独的外部对象，并将其提供给图表。所有的
destroy
功能都是让您销毁图表的一些以前的实例化，这样您就可以始终确保只创建一个图表

<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>
// gather the monthly dataset
const monthlyData = {
    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'
  }]
}

// gather the cumulative dataset
const cumulativeData = {
    ...
}

// define the default configuration
const defaultConfig = {
    type: 'bar',
    data: monthlyData;
    options: options
}

// create the chart with the default configuration
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, defaultConfig);

// add event listeners for the buttons
document.getElementById("0").addEventListener('click', () => {
  const chart = document.getElementById("myChart");
  chart.config.format = { monthly format };
  chart.data = monthlyData;
  chart.options = { monthly options };
  chart.update();
}

document.getElementById("1").addEventListener('click', () => {
  const chart = document.getElementById("myChart");
  chart.config.format = { cumulative format };
  chart.data= cumulativeData;
  chart.options = { cumulative options };
  chart.update();
}

</script>


整体（每月）
总体（累积）
//收集每月的数据集
常量月数据={
标签：['July'，'August'，'S

document.getElementById('graph').innerHTML = chart.generateLegend();



chart.config.data = {
    labels: myLabels,
    datasets: [{
      myDataSet
    }]
  };



    salesChart.update();



var salesChart = new Chart(salesChartCanvas, {
    type: 'line',
    data: areaData,
    options: areaOptions
  });

  document.getElementById('sales-statistics-legend').innerHTML = salesChart.generateLegend();
  $("#sales-statistics_switch_1").click(function () {
    salesChart.config.data = {
    labels: myData,
    datasets: [{
      data: myData,
      borderColor: infoColor,
      backgroundColor: gradientStrokeFill_1,
      borderWidth: 2
    }]
  };
    salesChart.update();
  });
  $("#sales-statistics_switch_2").click(function () {
    salesChart.config.data = {
    labels: myData4,
    datasets: [{
      data: myData4,
      borderColor: infoColor,
      backgroundColor: gradientStrokeFill_1,
      borderWidth: 2
    }]
  };
    salesChart.update();
  });