ChartJS Charts.js -带两个字轴的气泡图

vjrehmav  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(282)

我需要创建一个气泡图样式的图表,其中有两个轴,这两个都是文字,而不是文本。
在我的示例中,我希望:

  • x轴为颜色,例如红色、蓝色、黄色
  • y轴为汽车,如小型汽车、中型汽车、大型汽车

由此,我想绘制每辆车订购了多少辆,例如,如果订购了2辆红色汽车和1辆蓝色大车,则红色小车上会出现一个气泡,其大小是蓝色大车上气泡的两倍。
我已经对charts.js做了一些工作,但是我的示例中没有一个涉及到如何使用文本而不是数字。
任何帮助将不胜感激,我已经看过这里的文档..输入链接描述在这里,但一直无法得到任何工作。
先谢谢你。

v1uwarro

v1uwarro1#

我最近对数据集也有同样的要求,并在scale选项中为每个轴使用回调函数。我将标签的值列表填充到一个数组中,然后使用点的索引执行查找,以重命名刻度标签。

  1. var colours = ["Red", "Blue", "Green", "Yellow"];
  2. var carSizes = ["Small", "Medium", "Large"];
  3. // Small Red = 10
  4. // Small Green = 14
  5. // Medium Yellow = 23
  6. var dataPoints = [{x: 0, y: 0, r: 10}, {x: 2, y: 0, r: 14}, {x: 3, y: 1, r: 23}
  7. var myBubbleChart = new Chart(bubbleCtx, {
  8. type: 'bubble',
  9. data: dataPoints,
  10. options: {
  11. title: {
  12. display: true,
  13. text: "Car Orders"
  14. },
  15. scales: {
  16. yAxes: [{
  17. ticks: {
  18. stepSize: 1,
  19. callback: function (value, index, values) {
  20. if (index < carSizes.length) {
  21. return carSizes[carSizes.length - (1 + index)]; //this is to reverse the ordering
  22. }
  23. }
  24. },
  25. position: 'left'
  26. }],
  27. xAxes: [{
  28. ticks: {
  29. stepSize: 1,
  30. callback: function (value, index, values) {
  31. if (index < colours.length) {
  32. return colours[index];
  33. }
  34. }
  35. },
  36. position: 'bottom'
  37. }]
  38. }
  39. }
  40. });

经过多次试验和错误,我发现有必要将步长设置为1,否则图表将变得倾斜,数据出现在网格线之外。
如果不是动态设置数据,并且知道每个轴的最小值和最大值,则可以设置刻度的最小值和最大值属性,并将轴类型指定为“category”。

  1. yAxes: [{
  2. type: 'category',
  3. ticks: {
  4. stepSize: 1,
  5. min: 'Small',
  6. max: 'Large'
  7. },
  8. position: 'left'
  9. }]
展开查看全部
lf3rwulv

lf3rwulv2#

您可以使用bordercolor radius为0线型图表它将作为折线图使用,并避免使用折线图它将显示为气泡图

相关问题