charts.js 数据不适合第二个 y 轴

Question

我有一个简单的元素，包含整个数据集。
子集“更改”适用于第二个 Y 轴，但使用下面的代码，“更改”数据集仍然相对于左轴显示。
请指教，关于这个主题的文档不是很清楚。我希望蓝线与右轴相关，使用以下代码。

  let chartElement = $('#mainChart');
  const data = chartElement.data('chart-dataset');
  const cfg = {
      type: 'line',
      data: {
          datasets: [{
              'label': 'Total balance',
              data: data.stats,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'total',
                  yAxisID: 'y',
              },
              backgroundColor: 'rgb(98,250,2)',
              borderColor: 'rgb(98,250,2)',
          }, {
              'label': 'Risk balance',
              data: data.stats,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'risk',
                  yAxisID: 'y',
              },
              backgroundColor: 'rgb(255,191,34)',
              borderColor: 'rgb(255,191,34)',
          }, {
              'label': 'Average risk',
              data: data.stats,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'avRisk',
                  yAxisID: 'y',
              },
              backgroundColor: 'rgb(236,4,4)',
              borderColor: 'rgb(236,4,4)',
          }, {
              'label': 'Change %',
              data: data.change,
              parsing: {
                  xAxisKey: 'time',
                  yAxisKey: 'change',
                  yAxisID: 'yPercent',
              },
              backgroundColor: 'rgb(31,116,241)',
              borderColor: 'rgb(31,116,241)',
          }]
      },
      options: {
          scales: {
              y: {
                  id: 'y',
                  type: 'linear',
                  position: 'left',
                  ticks: {
                      beginAtZero: true,
                  }
              },
              yPercent: {
                  id: 'yPercent',
                  type: 'linear',
                  position: 'right',
                  suggestedMax: 1.0,
                  suggestedMin: -1.0,
                  ticks: {
                      precision: 4,
                  }
              },
          }
      }
  }
  const mainChart = new Chart(
      chartElement,
      cfg
  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="mainChart" data-chart-dataset="{&quot;stats&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;total&quot;:424.97014172,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;total&quot;:424.97666652,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;total&quot;:425.22301931,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;total&quot;:424.91940821,&quot;risk&quot;:307.70675151999995,&quot;avRisk&quot;:34.189639057777775}],&quot;change&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;change&quot;:0},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;change&quot;:0.0015353549248324776},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;change&quot;:0.05796854495972885},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;change&quot;:-0.07140043840822045}]}" width="1639" height="819" style="display: block; box-sizing: border-box; height: 819px; width: 1639px;"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>

Answer 1

yAxisID 不应该是解析对象的一部分。您需要在数据集的根目录中定义它：

let chartElement = $('#mainChart');
const data = chartElement.data('chart-dataset');
const cfg = {
  type: 'line',
  data: {
    datasets: [{
      'label': 'Total balance',
      data: data.stats,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'total',
      },
      backgroundColor: 'rgb(98,250,2)',
      borderColor: 'rgb(98,250,2)',
    }, {
      'label': 'Risk balance',
      data: data.stats,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'risk',
      },
      backgroundColor: 'rgb(255,191,34)',
      borderColor: 'rgb(255,191,34)',
    }, {
      'label': 'Average risk',
      data: data.stats,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'avRisk',
      },
      backgroundColor: 'rgb(236,4,4)',
      borderColor: 'rgb(236,4,4)',
    }, {
      'label': 'Change %',
      data: data.change,
      parsing: {
        xAxisKey: 'time',
        yAxisKey: 'change',
      },
      yAxisID: 'yPercent',
      backgroundColor: 'rgb(31,116,241)',
      borderColor: 'rgb(31,116,241)',
    }]
  },
  options: {
    scales: {
      y: {
        id: 'y',
        type: 'linear',
        position: 'left',
        ticks: {
          beginAtZero: true,
        }
      },
      yPercent: {
        id: 'yPercent',
        type: 'linear',
        position: 'right',
        suggestedMax: 1.0,
        suggestedMin: -1.0,
        ticks: {
          precision: 4,
        }
      },
    }
  }
}
const mainChart = new Chart(
  chartElement,
  cfg
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="mainChart" data-chart-dataset="{&quot;stats&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;total&quot;:424.97014172,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;total&quot;:424.97666652,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;total&quot;:425.22301931,&quot;risk&quot;:307.70675152,&quot;avRisk&quot;:34.18963905777778},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;total&quot;:424.91940821,&quot;risk&quot;:307.70675151999995,&quot;avRisk&quot;:34.189639057777775}],&quot;change&quot;:[{&quot;time&quot;:&quot;2022-03-27 00:00:05&quot;,&quot;change&quot;:0},{&quot;time&quot;:&quot;2022-03-27 00:30:06&quot;,&quot;change&quot;:0.0015353549248324776},{&quot;time&quot;:&quot;2022-03-27 01:00:06&quot;,&quot;change&quot;:0.05796854495972885},{&quot;time&quot;:&quot;2022-03-27 01:30:06&quot;,&quot;change&quot;:-100.07140043840822045}]}"
  width="1639" height="819" style="display: block; box-sizing: border-box; height: 819px; width: 1639px;"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>

charts.js 数据不适合第二个 y 轴

charts.js data doesn't fit second y-axis

javascript

charts

chart.js