Chart.js zoom无论使用哪种缩放类型,都会立即完全放大第一个点

c90pui9n  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(241)

添加缩放到我的折线图后,无论我做什么,它都会立即放大到第一个点,而没有缩小的选项(在重置缩放功能之外)。缩小功能也不起作用,放大功能也会导致同样的问题。
NormalAfter any attempt to zoom

  1. const pdmdata = JSON.parse(document.getElementById('div_pdmdata').dataset.chart);
  2. const ctx = document.getElementById('canvasChart_1').getContext("2d");
  3. const radars = {'hidden': 'hidden'};
  4. let linechartData = {
  5. datasets: [{
  6. label: 'Constant',
  7. data: pdmdata[0],
  8. borderWidth: 1
  9. }]
  10. };
  11. for (let i = 0; i < Object.keys(pdmdata[1]).length; i++) {
  12. linechartData.datasets.push({
  13. label: radars[Object.keys(pdmdata[1])[i]],
  14. data: pdmdata[1][Object.keys(pdmdata[1])[i]],
  15. borderWidth: 1,
  16. tension: 0.1
  17. });
  18. }
  19. const config = {
  20. type: 'line',
  21. data: linechartData,
  22. options: {
  23. maintainAspectRatio: false,
  24. interaction: {
  25. mode: 'index',
  26. intersect: false,
  27. },
  28. stacked: false,
  29. plugins: {
  30. title: {
  31. display: true,
  32. text: 'Mode S'
  33. },
  34. zoom: {
  35. zoom: {
  36. drag: {
  37. enabled: true,
  38. // mode: 'x',
  39. threshold: 24
  40. },
  41. mode: 'x'
  42. }
  43. }
  44. },
  45. scales: {
  46. x: {
  47. reverse: true
  48. }
  49. },
  50. elements: {
  51. point: {
  52. radius: 0
  53. }
  54. }
  55. },
  56. };
  57. myChart = new Chart(ctx, config);
  58. function resetZoom(){
  59. myChart.resetZoom();
  60. }

我试过所有的变焦类型;缩放,拖动和平移。即使在图表中间使用拖动也会使它像上面的缩放图像一样结束。控制台中没有任何错误。我也尝试过将速度设置为0.001,但没有效果。最奇怪的是,当我复制下面的图表时,它确实按预期缩放。我不知道为什么会这样。

wi3ka0sx

wi3ka0sx1#

好了,我发现了我的问题,chartjs-zoom不喜欢没有自己设置标签的对象作为数据。这里有一个例子:(测试时仅使用1个数据集,以便于测试)
这是可行的:

  1. let linechartData = {
  2. label: ['one', 'two', 'three', 'four', 'five'],
  3. datasets: [{
  4. label: 'Constant',
  5. data: [1, 2, 3, 4, 5],
  6. borderWidth: 1
  7. }]
  8. };

这是行不通的:

  1. let linechartData = {
  2. datasets: [{
  3. label: 'Constant',
  4. data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
  5. borderWidth: 1
  6. }]
  7. };

但这是:

  1. let linechartData = {
  2. label: ['one', 'two', 'three', 'four', 'five'],
  3. datasets: [{
  4. label: 'Constant',
  5. data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
  6. borderWidth: 1
  7. }]
  8. };

所以结论是,当使用chartjs-zoom时,总是预先分配标签,而不是让数据集数据对象自动分配,这对于没有缩放的普通图表来说工作得很好。从来没有弄清楚为什么如果我用完全相同的配置制作了第二个图表,图表确实工作。

展开查看全部

相关问题