Question

我正在使用chart.js来渲染图表。我正在使用多轴图表，其中y轴为-100到100，底部为x轴，如果值>＆gt;则标签为黑色/白色。 0表示黑色，如果值<0表示白色。

我想将标签分开＆＃34; black＆＃34;在顶部和＆＃34;白色＆＃34;在图表的底部，我该怎么办？

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和scale数组

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,
          }
        });

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

1 个答案: