操作X轴标签定位,React Chartjs 2

8iwquhpp  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(207)

我正在尝试制作一个面积图,使X轴标签显示在实际坐标轴的上方。下面是一个示例:

我有轴标签,但无法将其移动到X轴上方

  1. Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Filler)
  2. const options = {
  3. layout: { padding: { top: 50 } },
  4. responsive: true,
  5. elements: {
  6. line: {
  7. tension: 0.4, // makes the line smoother
  8. },
  9. point: {
  10. radius: 0,
  11. },
  12. },
  13. scales: {
  14. x: {
  15. grid: {
  16. display: false, // hides lines in background
  17. drawBorder: false,
  18. },
  19. },
  20. y: {
  21. beginAtZero: true,
  22. grid: {
  23. display: false, // hides lines in background
  24. drawBorder: false,
  25. },
  26. ticks: {
  27. display: false,
  28. },
  29. },
  30. },
  31. }
  32. const chartData = {
  33. labels: ['JAN', 'FEB', 'MAR', ...],
  34. datasets: [
  35. {
  36. data: [12, 79, 56, ...],
  37. borderWidth: 5,
  38. },
  39. ],
  40. }
  41. export const Graph = () => {
  42. return (
  43. <div>
  44. ....
  45. <Line plugins={plugins} options={options} data={chartData} />
  46. </div>
  47. )
  48. }

我需要它的响应性,能够改变时间窗口的图形。我试图做一个afterDraw()函数,但这是不理想的需要响应。

w8rqjzmb

w8rqjzmb1#

经过一番挖掘,我找到了这个解决方案:

  1. const options: {
  2. ...
  3. scales:{ x: position: { y: 20 } }. <------------------ Answer here
  4. }

相关问题