修改 chart.js 中的标签，当我更新图表时

huangapple
go评论104阅读模式
英文:

Modify the labels in chart.js when I update the chart

问题

我正在使用chart.js创建一些动态图表。我知道如何创建不同类型的图表并修改要显示的数据，但问题是我不知道如何更新标签。

这里我只展示更新数据的代码：

  1. const colores = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#FFF850"];
  2. const etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America", "Miguel"];
  3. var paquetes_pie = null;
  5. function graficoPaquetes(datos) {
  6.     let ctx = document.getElementById("paquetes_graf").getContext("2d");
  7.     let tipo = 'pie';
  8.     let titulo = 'Paquetes perdidos';
  10.     paquetes_pie = new Chart(ctx, {
  11.     type: tipo,
  12.     data: {
  13.         labels: etiquetas,
  14.         datasets: [{
  15.             label: "Paquetes perdidos",
  16.             backgroundColor: colores,
  17.             borderWidth: 1,
  18.             borderColor: '#FFF',
  19.             data: datos,
  20.         }]
  21.     },
  22.     options: {
  23.         title: {
  24.             display: true,
  25.             text: titulo
  26.         }
  27.     }
  28.   });
  29. }
  31. function addData(chart, title, data) {
  32.   chart.options.title.text = title;
  33.   chart.data.datasets.forEach((dataset, i) => {
  34.     dataset.data = data;
  35.   });
  36.   chart.update();
  37. }
  39. $(document).ready(function() {
  40.     
  41.     var data = [2478, 5267, 734, 784, 433, 99];
  42.     graficoPaquetes(data);
  44.     $('.btn_graf').click(function() {
  45.         data = [24, 67, 4, 4, 3, 9];
  46.         addData(paquetes_pie, "Paquetes perdidos", data);
  47.     });
  48. });

现在我展示一些错误的标签更新想法：

  1. function addData(chart, title, data, etiquetas) {
  2.     chart.options.title.text = title;
  3.     chart.data.datasets.forEach((dataset, i) => {
  4.         dataset.data = data;
  5.     });
  6.     //chart.data.forEach((dat, i) => { //第一次尝试
  7.         //dat.labels = etiquetas;
  8.     //});
  9.     //chart.data.labels = etiquetas; // 第二次尝试
  10.     chart.update();
  11. }
  13. $('.btn_graf').click(function() {
  14.     data = [24, 67, 4, 4, 3, 9];
  15.     etiquetas = ["A", "B", "C", "D", "E", "F"];
  16.     addData(paquetes_pie, "Paquetes perdidos", data, etiquetas);
  17. });

希望这可以帮助你。

英文:

I'm working with chart.js to create some dynamical charts. I know how to create different kind of charts and modify the data that I want to show but the problem is that I don't know how to update the label.

Here I show my code just updating data:

  1. const colores = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#FFF850"];
  2. const etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America","Miguel"];
  3. var paquetes_pie = null;
  4. function graficoPaquetes(datos) {
  5. let ctx = document.getElementById("paquetes_graf").getContext("2d");
  6. let tipo = 'pie';
  7. let titulo = 'Paquetes perdidos';
  8. paquetes_pie = new Chart(ctx, {
  9. type: tipo,
  10. data: {
  11. labels: etiquetas,
  12. datasets: [{
  13. label: "Paquetes perdidos",
  14. backgroundColor: colores,
  15. borderWidth: 1,
  16. borderColor: '#FFF',
  17. data: datos,
  18. }]
  19. },
  20. options: {
  21. title: {
  22. display: true,
  23. text: titulo
  24. }
  25. }
  26. });
  27. }
  28. function addData(chart, title, data) {
  29. chart.options.title.text = title;
  30. chart.data.datasets.forEach((dataset, i) => {
  31. dataset.data = data;
  32. });
  33. chart.update();
  34. }
  35. $(document).ready(function() {
  36. var data = [2478, 5267, 734, 784, 433, 99];
  37. graficoPaquetes(data);
  38. $('.btn_graf').click(function() {
  39. data = [24, 67, 4, 4, 3, 9];
  40. addData(paquetes_pie, "Paquetes perdidos", data);
  41. });
  42. });

Now I show some wrong ideas to update the label:

  1. function addData(chart, title, data, etiquetas) {
  2. chart.options.title.text = title;
  3. chart.data.datasets.forEach((dataset, i) => {
  4. dataset.data = data;
  5. });
  6. /*chart.data.forEach((dat, i) => { //first attempt
  7. dat.labels = etiquetas;
  8. });*/
  9. //chart.data.labels = etiquetas; // Second attempt
  10. chart.update();
  11. }
  12. $('.btn_graf').click(function() {
  13. data = [24, 67, 4, 4, 3, 9];
  14. etiquetas = ["A", "B", "C", "D", "E", "F"];
  15. addData(paquetes_pie, "Paquetes perdidos", data, etiquetas);
  16. });

Can somebody help me?

Thank you very much

答案1

得分: 3

你可以按如下方式更新：

  1. chart.config.data.labels = newLabels // 你可以传递新的标签
  2. chart.update()
英文:

You can update like as follows

  1. chart.config.data.labels = newLabels // you can pass the new labels
  2. chart.update()

答案2

得分: 0

尝试一下

  1. chart.data.labels = 新标签
  2. chart.update()
英文:

Try it also

  1. chart.data.labels = newLabels
  2. chart.update()

huangapple
  • 本文由 发表于 2020年1月6日 19:18:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/59611169.html
  • chart.js
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定