Chart.js 适配不同的 X 轴具有相同的比例

Question

Chart

你好，我有这两个图表，其中 X 轴上有一个时间戳值。想叠起来，不知道怎么调整X轴。

我怎样才能告诉 chart.js 展开上面的图表以便使用相同的比例？

这里是里面代码的简化版，我注释了每个Y对应的x值

const data = {
    labels: [1,2,3,4,5,6,7,8,9,10,11,12],
    datasets: [
        {
            label: 'full data',
            //Xaxis = [1,2,3,4,5,6,7,8,9,10,11,12]
            data: [2,3,4,3,2,3,4,5,6,5,4,5],
            borderColor: ['rgba(75, 192, 192, 1)'], //green
            yAxisID: 'y1'
        },
        {
            label: 'stacked data',
            //Xaxis = [1,4,7,10]
            data: [2,3,4,3], //one every three points of full data, but they start from 1
            borderColor: ['rgba(255, 99, 132, 1)'], //red
            stepped: true,
            yAxisID: 'y2'
        },
    ]
}

const config = {
    type: 'line',
    data: data,
    options: {
        interaction: {
            intersect: false,
            mode: 'index',
        },
        pointRadius: 0,
        scales: {
            y1: {
                min:0,
                stack: 'demo'
            },
            y2: {
                min:0,
                stack: 'demo'
            },
        }
    }
}

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);

编辑：按照建议，我更改了问题以便更容易理解（我希望如此）

Answer 1

2 种方法，您可以添加第二个隐藏的 x 尺度，您 link 您的数据集具有较少的条目，如下所示：

const data = {
  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  datasets: [{
      label: 'full data',
      //Xaxis = [1,2,3,4,5,6,7,8,9,10,11,12]
      data: [2, 3, 4, 3, 2, 3, 4, 5, 6, 5, 4, 5],
      borderColor: ['rgba(75, 192, 192, 1)'], //green
      yAxisID: 'y1'
    },
    {
      label: 'stacked data',
      //Xaxis = [1,4,7,10]
      data: [2, 3, 4, 3], //one every three points of full data, but they start from 1
      borderColor: ['rgba(255, 99, 132, 1)'], //red
      stepped: true,
      yAxisID: 'y2',
      xAxisID: 'x2'
    },
  ]
}

const config = {
  type: 'line',
  data: data,
  options: {
    interaction: {
      intersect: false,
      mode: 'index',
    },
    pointRadius: 0,
    scales: {
      y1: {
        min: 0,
        stack: 'demo'
      },
      y2: {
        min: 0,
        stack: 'demo'
      },
      x: {},
      x2: {
        display: false,
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].filter((e, i) => i % 3 === 0) // Generate labels array for only every third element
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, config);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

或者您可以使用数据集的对象表示法 link 到正确的 x 轴标签：

const data = {
  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  datasets: [{
      label: 'full data',
      //Xaxis = [1,2,3,4,5,6,7,8,9,10,11,12]
      data: [2, 3, 4, 3, 2, 3, 4, 5, 6, 5, 4, 5],
      borderColor: ['rgba(75, 192, 192, 1)'], //green
      yAxisID: 'y1'
    },
    {
      label: 'stacked data',
      //Xaxis = [1,4,7,10]
      data: [{
        x: 1,
        y: 2
      }, {
        x: 4,
        y: 3
      }, {
        x: 7,
        y: 4
      }, {
        x: 10,
        y: 3
      }], //one every three points of full data, but they start from 1
      borderColor: ['rgba(255, 99, 132, 1)'], //red
      stepped: true,
      yAxisID: 'y2'
    },
  ]
}

const config = {
  type: 'line',
  data: data,
  options: {
    interaction: {
      intersect: false,
      mode: 'index',
    },
    pointRadius: 0,
    scales: {
      y1: {
        min: 0,
        stack: 'demo'
      },
      y2: {
        min: 0,
        stack: 'demo'
      },
      x: {}
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, config);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

Chart.js 适配不同的 X 轴具有相同的比例

Chart.js Adapting different X axis with same scale

javascript

chart.js