Question

我是初学者。我一直在尝试使用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

});

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

Answer 1

非常感谢您的最佳答案，它也对我有用。

我有几个按钮可以更改图表视图，因此获得无限更改视图的方法是像这样定义图表元素：

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

然后让您的 Jquery 按钮回调编辑整个配置，包括如下标签：

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

Answer 2

关于本文档

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

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

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

现在加载页面，然后单击Overall (Monthly)按钮

希望这会有所帮助

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

Answer 3

您要做的是仅向图表提供您希望图表一次显示的数据。因此，如果要在两个不同的视图之间进行切换，请为这些视图创建数据，并将其作为单独的外部对象馈入统计图。 destroy所做的全部工作就是让您销毁一些先前的Chart实例，以便始终确保只创建一个Chart。

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

所有您需要做的是在按钮上添加一个事件侦听器（侦听“ click”事件），然后向该侦听器添加一个回调函数以使用“ =”更新图表对象，然后运行{{1 }}。

让我知道这是否有帮助！

编辑：即使JQuery中有另一个答案，我也将其包含在原始Javascript中，因为您可能没有使用JQuery。该用户还提供了此文档，这对您很有帮助：https://www.chartjs.org/docs/latest/developers/updates.html

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

3 个答案: