如何在chart.js中旋转线性图形?

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

我已经使用chart js生成了一个线性图形,但是我必须在与默认显示的位置不同的位置显示它。
我曾看过如何旋转图形生成的标签的示例,但这只适用于文本,而不适用于整个图形
目前这是我的代码来生成图形
第一个
我希望得到一个如下图所示的旋转图形

编辑

在chart.js的文档中再研究一下,我发现有一个选项可以将轴的位置设置为“右”、“左”、“上”或“下”。
在这部分代码中应用这些选项

  1. xAxes: [{
  2. display: true,
  3. scaleLabel: {
  4. display: true,
  5. labelString: "Depth",
  6. },
  7. position: 'left' //X-axis position change
  8. }],
  9. yAxes: [{
  10. display: true,
  11. scaleLabel: {
  12. display: true,
  13. labelString: "Temperature ° C",
  14. },
  15. position: 'top' //Y-axis position change
  16. }]

但现在的问题是,因为X轴上的值不存在,所以这些值已经消失了。了解代码中的变化,你就会明白我的意思。
提前感谢您的帮助和建议。

rlcwz9us

rlcwz9us1#

要旋转整个图表元素(如在图像中),可以使用CSS rotate transform function

  1. # chart-zone {
  2. transform: rotate(90deg);
  3. }

请注意,图表可能会被裁剪,因此您需要适当地设置容器的边界大小(高度/宽度)。

相关问题