使用库chart.js 在一张带有两个 y 轴的图表中绘制两个数据集

问题描述 投票：0回答：1

我使用 Chart.js 库编写了以下 CODE，它生成了下面显示的 OUTPUT。我正在寻求有关如何有效控制水平轴上的标签的指导。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    
    <canvas id="chart" width="1920" height="1080"></canvas>
    
    <script>
        
        const ctx = document.getElementById('chart').getContext('2d');

        const chart = new Chart(ctx, {
              type: 'line',
              data: {
                datasets: [
                  {
                    yAxisID: 'yA',
                    label: 'Data1',
                    data: [
                          { x: 0.05, y: 12 },
                          { x: 0.15, y: 19 },
                          { x: 0.25, y: 3 },
                          { x: 0.35, y: 5 },
                          { x: 0.45, y: 2 },
                          { x: 0.55, y: 3 },
                          ],
                  },
                  {
                    yAxisID: 'yB',
                    label: 'Data2',
                    data: [
                          { x: 0.1, y: 20 },
                          { x: 0.2, y: 1 },
                          { x: 0.3, y: 15 },
                          { x: 0.4, y: 2 },
                          { x: 0.5, y: 31 },
                          { x: 0.6, y: 11 },
                          ],
                  }
                ]
              },
              options: {
                        responsive: true,
                            scales: {
                                      yA: {
                                        type: 'linear',
                                        position: 'left',
                                        ticks: { beginAtZero: true, color: 'blue' },
                                        grid: { display: false }
                                      },
                                      yB: {
                                        type: 'linear',
                                        position: 'left',
                                        ticks: { beginAtZero: true, color: 'green' },
                                        grid: { display: false }
                                      },
                                      x: { ticks: { beginAtZero: true }}
                                    }
                        }
            });
        
    </script>
    
</body>
</html>

输出

我尝试使用提供的代码在单个 Chart.js 图表中绘制两个数据集。我希望这两个数据集都能在图表上清晰可见。

javascript html graph chart.js
1个回答
0
投票

根据代码片段和所描述的问题，您似乎在使用 Chart.js 图表中的水平（x 轴）标签时遇到了问题。要管理水平轴上的标签，您需要在图表配置中配置比例选项，特别是 x 轴部分。

从您的代码中，我注意到您使用的数据点的 x 值为小数。如果您希望这些在 x 轴上显示为标签，则需要在图表配置的数据对象中指定标签数组。但是，当您不使用时间序列时，Chart.js 期望标签数组与 x 轴标签的数据集处于同一级别。

以下是如何指定标签的高级示例：

data: {
  labels: [/* array of labels corresponding to your data points */],
  datasets: [/* your datasets here */]
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.