使用 ChartJS 在 React 中动态添加 x 轴

Question

我想在我的 ChartJS 中添加另一个 x 轴，但比例不会分开，例如我想要 x 轴上的一个标签 0-9 和另一个 0-16 单独显示。它适用于 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();
    }

现在这是我的 class，我在这里初始化线图并有 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;

Answer 1

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

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();

使用 ChartJS 在 React 中动态添加 x 轴

Dynamically add x-axis in React using ChartJS

charts

dataset

reactjs

chart.js

x-axis