chart.js 时间序列多轴案例答案

【问题标题】：chart.js time series multi axis casechart.js 时间序列多轴案例
【发布时间】：2021-10-10 03:02:19
【问题描述】：

假设有几个独立的时间序列 (unixTime, value) 点。例如，CarSpeed 和 CarRemainingFuel。我想创建一个多轴图（CarSpeed 的 Y1 轴和 CarRemainingFuel 的 Y2 轴）。类似问题不涉及x轴“时间”类型的情况。

下面是我的单个时间序列图的工作示例。需要针对多轴情况进行扩展。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>


<canvas id="myChart"></canvas>
<script type="text/javascript">
    $("#myChart").width( $(window).width() *0.97 );
    $("#myChart").height( $(window).height() * 0.8 );

    var ctx = document.getElementById('myChart').getContext('2d');

    const options = {
        type: 'line',
        data: {
            datasets: [{
            label: 'CarSpeed',
            data: carSpeedData,
            borderColor: 'pink'
            }]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false,
            responsive: false,
            scales: {
            x: {
                type: 'time',
                title: {
                    display: true,
                    text: 'Time (client time zone)',
                    font: {
                        size: 24
                    }
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Car Speed, mph',
                    font: {
                        size: 24
                    }
                }
            }
            }
        }
    }

    new Chart(ctx, options);
</script>

【问题讨论】：

标签： chart.js

【解决方案1】：

您可以在比例配置中添加一个额外的比例并使用数据集中的yAxisID 链接到它

var options = {
  type: 'line',
  data: {
    datasets: [{
        label: '# of Votes',
        data: [{
          x: new Date('09-08-2021 12:04'),
          y: 10
        }, {
          x: new Date('09-08-2021 12:08'),
          y: 15
        }, {
          x: new Date('09-08-2021 12:12'),
          y: 5
        }, {
          x: new Date('09-08-2021 12:30'),
          y: 8
        }],
        borderColor: 'pink',
        yAxisID: 'y'
      },
      {
        type: 'bar',
        label: '# of Points',
        data: [{
          x: new Date('09-08-2021 12:04'),
          y: 4
        }, {
          x: new Date('09-08-2021 12:08'),
          y: 6
        }, {
          x: new Date('09-08-2021 12:12'),
          y: 12
        }, {
          x: new Date('09-08-2021 12:30'),
          y: 18
        }, {
          x: new Date('09-08-2021 12:022'),
          y: 10
        }, {
          x: new Date('09-08-2021 12:38'),
          y: 15
        }, {
          x: new Date('09-08-2021 12:52'),
          y: 5
        }, {
          x: new Date('09-08-2021 12:59'),
          y: 8
        }],
        backgroundColor: 'orange',
        yAxisID: 'y2'
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time',
      },
      y: {
        title: {
          display: true,
          text: 'Car Speed, mph',
          font: {
            size: 24
          }
        }
      },
      y2: {
        position: 'right',
        title: {
          display: true,
          text: 'secondY',
          font: {
            size: 24
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

【讨论】：