Question

我已经使用图表js生成了线性图，但是必须将其显示在与默认显示位置不同的位置。

我已经看到了如何旋转图形生成的标签的示例，但这仅适用于文本，不适用于整个图形

当前，这是我生成图形的代码

var dataSets = [
      dt1 = {
        borderColor: "#434EDA",
        data: [17.28, 22.58, 27.91, 31.95, 36.32, 41.73, 45.78, 48.55, 53.48, 47.82,],
        fill: false,
        label: "Dataset1",
        pointHitRadius: 5,
        pointRadius: 5
      },
      dt2 = {
        borderColor: "#3DE383",
        data: [11.83, 20.23, 26.9, 32.39, 36.95, 41.48, 46.41, 48.82, 52.58, 49.42,],
        fill: false,
        label: "Dataset2",
        pointHitRadius: 5,
        pointRadius: 5
      },
      dt3 = {
        borderColor: "#ec0000",
        data: [14.2, 20.94, 27.36, 32.12, 36.33, 41.4, 46.58, 48.8, 52.69, 48.9,],
        fill: false,
        label: "Dataset3",
        pointHitRadius: 5,
        pointRadius: 5
      }
    ]

    var grafValues = {
      labels: ["0 mts", "1 mts", "2 mts", "3 mts", "4 mts", "5 mts", "6 mts", "7 mts", "8 mts",],
      datasets: dataSets,
    }

    var grafOptions = {
            // responsive: true,
            scales: {
                xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Depth"
                        },
                }],
                yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Temperature ° C"
                        },
                }]
            },
            title: {
                display: true,
                text: "Graphic 1"
            },
            legend: {
                display: true,
                position: 'top',
                labels: {
                    boxWidth: 40,
                    fontColor: 'black'
                }
            },
            tooltips: {
                enabled: true
            }
        }

        var ctx = document.getElementById('chart-zone').getContext('2d');
        var lineChart = new Chart(ctx, {
          type: 'line',
          data: grafValues,
          options: grafOptions
        })

<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
   <canvas id="chart-zone" ></canvas>
  </body>

我希望旋转一个图形，如下图所示

编辑

在chart.js文档中进行了更多研究，我发现有一个选项可以将轴的位置设置为“右”，“左”，“顶部”或“底部”。

在代码的这一部分中应用这些选项

xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: "Depth",
                    },
                    position: 'left' //X-axis position change
            }],
            yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: "Temperature ° C",
                    },
                    position: 'top' //Y-axis position change
            }]

但是现在的问题是，这些值已消失，因为X轴上的值不存在。意识到代码中的更改，您将明白我的意思。

感谢您的帮助和建议。

Answer 1

要旋转整个图表元素（如图像中一样），可以使用CSS rotate transform function：

#chart-zone {
  transform: rotate(90deg);
}

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

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

1 个答案: