javascript - ChartJs多轴图表显示不同的标签底部和顶部

Question

我正在使用 Chart.js 来渲染图表。我使用的多轴图表的 y 轴从 -100 到 100，底部有 x 轴，带有黑/白等标签，如果值 > 0，则表示黑色，如果值 <0，则表示白色。

我想将图表上的“黑色”标签和底部的“白色”标签分开，我该怎么做？

var other = new Chart(ctx5,{
        type: 'radar',
        data: {
              labels:other_data_label,
              datasets:[{
                      data: behaviour_fixed_array, //processing_information_data,
                      backgroundColor: 'rgba(102, 187, 158,0.2)',
                      borderColor: 'rgb(102,187,158)',
                      pointBackgroundColor:'rgb(67, 122, 103)',
                        },
                        {
                        backgroundColor: 'rgba(188,101,47,0.2)',
                        borderColor: 'rgb(168,101,47)',
                        pointBackgroundColor:'rgb(155, 21, 6)',
                        data: []
                        }]
              },
        options: {
              legend: {
                  position: 'top',
                  display: false
              },
              scale: {
                    display: true,
                    ticks: {
                          beginAtZero: true,
                            }
                     },
              responsive:true,
              maintainAspectRatio: true,
                 }
          });
     //end graph 5//

Answer 1

您需要做两件事: 1.为每个数据集分配一个xAxis 2.为选项对象内部的xAxes设置不同的选项

我在这里开始了一个示例 - 请注意 xAxesID 和刻度数组

data: {
  labels:other_data_label,
  datasets:[{
              data: behaviour_fixed_array, //processing_information_data,
              backgroundColor: 'rgba(102, 187, 158,0.2)',
              borderColor: 'rgb(102,187,158)',
              pointBackgroundColor:'rgb(67, 122, 103)',
              xAxisID: 'x-axis-1'
            },
            {
              backgroundColor: 'rgba(188,101,47,0.2)',
              borderColor: 'rgb(168,101,47)',
              pointBackgroundColor:'rgb(155, 21, 6)',
              data: [],
              xAxisID: 'x-axis-2'
            }]
          },
          options: {
            legend: {
              position: 'top',
              display: false
            },
            scales: {
              xAxes: [{
                display: true,
                position: 'top',
                id: 'x-axis-1'
              },
              {
                display: true,
                position: 'bottom',
                id: 'x-axis-2'
              }]
            },
            responsive:true,
            maintainAspectRatio: true,
          }
        });