反应图-2多个x轴

Question

我使用react-chart-2 Line来显示图形；我想要的是在相同的图中有2行，而不是y轴中的多个值，我想要相同的y轴，但是不同的标签；例如，我有这些标签。

const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpe = ['circle', 'square']

我有这样的价值：

const colorsData = [10, 5, 8, 9, 7]
const sharpeData = [17, 2]

在我的选择范围内

scales: {
      x: {
        grid: {
          drawOnChartArea: false,
        },
        position: 'bottom' as const;
        labels: colors
      },
      x1: {
        grid: {
          drawOnChartArea: true,
        },
        position: 'top' as const,
        labels: sharpe,
        
      },
      y: {
        beginAtZero: true,
        ticks: {
          maxTicksLimit: 5,
          stepSize: 5,
        },
      },
    },

在我的数据里

{
  labels: colors,
  datasets: [
            {
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(13, 202, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: colorsData,
              xAxisId: 'x'
            },
    
            {
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(202, 13, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: sharpeData,
              xAxisId: 'x1',
            }
          ]
}

预期的结果是，我有2x轴，底部是颜色，顶部是夏普；一个y轴；这两条线将被绘制，但颜色取决于colorsData值，夏普取决于sharpeData值。相反，颜色线是按预期绘制的，但是sharpe线遵循颜色标签，而不是sharpe标签。

Answer 1

你想要达到的目标是不可能的。上下轴的值应该是相同的。除非你用css把两个图表叠加在一起。

您只能对轴x和x1或y和y1分别使用相同的标签。

这是y轴在Charts.js上的官方文档。

https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

下面是一些代码，可以让您了解我在x轴顶部和底部的内容：

选项：

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    interaction:{
      mode: "index",
      intersect: false,
    },
    stacked: false,
    scales: {
      x:{
        type: "linear",
        display: true,
        position: "bottom",
      },
      x1:{
        type: "linear",
        display: true,
        position: "top",
         grid: {
          drawOnChartArea: false,
        },
      },
     
    },  
  },
};

数据：

const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpeData = [17, 2, 9, 12 ,3];
const colorsData = [10, 5, 8, 9, 7];
const data = {
  labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
  datasets: [
            {
              label: "Colors",
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(13, 202, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: colorsData,
              xAxisId: 'x',
            },
    
            {
              label: "Shape",
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: 'rgba(202, 13, 240, 1)',
              pointHoverBackgroundColor: '#fff',
              borderWidth: 1,
              data: sharpeData,
              xAxisId: 'x1',
            }
          ]
};

希望这能有所帮助！