0

我想向我的 ChartJS 添加另一个 x 轴，它可以工作，但比例不会分开，例如，我希望 x 轴上的一个标签分别显示 0-9 和另一个 0-16。它适用于 y 轴但不适用于 x 轴。这是一张显示单独的 y 轴有效但 x 轴无效的图像

现在是代码：在这里我创建了一个初始状态

let state = {
          labels: [],
          datasets: [
            {
              label: 'ignore',
              
              fill: false,
              lineTension: 0,
              backgroundColor: 'rgba(109, 24, 172, 1)',
              borderColor: 'rgba(109, 24, 172, 1)',
              borderWidth: 0.1,
              pointRadius: 0.2,
              data: []
            }, {
              label: 'ignore1',
              fill: false,
              lineTension: 0,
              backgroundColor: 'rgba(0, 250, 255, 1)',
              borderColor: 'rgba(0, 250, 255, 1)',
              borderWidth: 0.1,
              pointRadius: 0.2,
              data: []
            }
          ]
        };

这是我的第一个函数，有 9 个数据点：

function adddataset(){
      let lineChart = Chart.instances[0];
      const data=lineChart.data;
      const newDataset = {
        label: 'Dataset ' + (data.datasets.length + 1),
        backgroundColor: 'rgba(109, 24, 172, 1)',
        borderColor: 'rgba(0, 250, 255, 1)',
        data: [65, 59, 80, 81, 56, 55, 40],
        yAxisID: 'By',
        xAxisID: 'Bx',
      };
      lineChart.data.datasets.push(newDataset);
      lineChart.update();
    }

这是我添加第二个数据集的第二个函数：

function adddataset1(){
      let lineChart = Chart.instances[0];
      const data=lineChart.data;
      const newDataset = {
        label: 'Dataset ' + (data.datasets.length + 1),
        backgroundColor: 'rgba(rgba(109, 24, 172, 1)',
        borderColor: 'rgba(109, 24, 172, 1)',
        data: [100,30,50,60,20,30,60,100,34,3456,6,5,4,3,5,545],
        
        yAxisID: 'Cy',
        xAxisID: 'Cx',
    
        
      };
      lineChart.data.datasets.push(newDataset);
      
      lineChart.update();
    }

现在这是我的课程，我在其中初始化 LineGraph 并有 2 个调用函数的按钮

class About extends React.Component {
  render() {

    return (

      <body>
        <main>
          Graph
          <div className='Graph'>
            <div style={{ height: 500 }}>
              <Line
                id="mychart"
                data={state}
                options={{
                  title: {
                    display: true,
                    text: 'Average Rainfall per month',
                    fontSize: 20
                  },
                  legend: {
                    display: true,
                    position: 'right'
                  },

                  maintainAspectRatio: false,
                  responsive: true
                }}
              />
            </div>

          </div>
          <button onClick={adddataset1}>
            Button1
          </button>
          <button onClick={adddataset}>
            Button2
          </button>
        </main>
      </body>
    );
  }
}
export default About;
4

1 回答 1

1

您的问题有两种解决方案，您可以以对象格式提供数据，以便从对象中获取标签，如下所示：

const data = [{x: '1', y: 5}, {x: '2', y: 3}];

或者，您可以将具有正确 ID 的第二个 x 轴添加到具有标签数组属性的所有比例尺中，您可以在其中指定该比例尺的标签，这样您将获得如下内容：

const myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

myChart.options.scales['secondX'] = {
  labels: ['6', '7', '8'],
  position: 'bottom'
}

myChart.update();
于 2021-09-28T08:10:39.563 回答