更改数据集和更新的背景颜色后,数据集图例颜色未更新(chartJs框架)

cxfofazt  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(186)

我是一个新的chartJS框架,但这对我来说似乎很奇怪。我有水平条形图和2个基本的数据集。事情是,我试图做一个按钮,这将改变数据集的背景颜色(在我的例子中->对于数据集1,但这并不重要,这只是测试场景)。当我点击按钮时,它将改变图形中条形图的背景颜色,但不会改变我的数据集图例的背景颜色。

**示例:**数据集1的背景颜色为红色。我点击我的按钮,它会将图表中的条形图的背景颜色更改为绿色(或其他颜色,这并不重要)。数据集1的图例将保持红色,因此。

Here is my code

bwntbbo3

bwntbbo31#

update()

在创建图表后想要更新图表是很常见的。当图表数据或选项更改时,Chart.js将根据新的数据值和选项进行动画处理。https://www.chartjs.org/docs/latest/developers/updates.html?h=update

官方脚本示例(通过点击更改颜色和数据):https://www.chartjs.org/samples/latest/scriptable/bar.html

或她(在scriptable title下):https://www.chartjs.org/samples/latest/
myHorizontalBar是您的图表对象,因此请删除window.(删 debugging 误-检查控制台错误)。

  1. window.myHorizontalBar.update(); /* wrong syntax remove "window." */

字符串

“hello world”示例

  1. /* data */
  2. var data = {
  3. labels: ["Africa", "Asia", "Europe", "America"],
  4. datasets: [{
  5. /* data */
  6. label: "Data label",
  7. backgroundColor: ["red", "#8e5ea2","#3cba9f", '#1d49b8'],
  8. data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5]
  9. }]
  10. };
  11. var options = {
  12. responsive: true,
  13. title: {
  14. text: 'Hello',
  15. display: true
  16. },
  17. scales: {
  18. xAxes: [{
  19. stacked: false,
  20. ticks: {
  21. },
  22. }],
  23. yAxes: [{
  24. stacked: true,
  25. ticks: {
  26. }
  27. }]
  28. }
  29. };
  30. var myChart = new Chart(document.getElementById("chart"), {
  31. type: 'bar',
  32. data: data,
  33. options: options
  34. });
  35. document.getElementById('submitChange').addEventListener('click', function() {
  36. myChart.data.datasets[0].backgroundColor[0] = "green";
  37. myChart.update();
  38. });
  1. <button id="submitChange">Change Africa color to Green</button>
  2. <canvas id="chart"></canvas>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

的数据

展开查看全部

相关问题