ChartJs:尽管 X 轴上的数据相同,但无法在不同图表中设置相同的 X 轴值

问题描述 投票:0回答:0

我有两个不同的图表。第一个图表代码如下所示:

function createLineGraph(chartId,data,labels,xLabel,yLabel,title) {
    // Create a new Chart.js instance
    var ctx = document.getElementById(chartId).getContext('2d');
    const chartObject = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [],
      },
      plugins: [miniLabelPlugin],
      options: {
        // tooltips: {enabled: true},        
        onHover(e, elements, chart) {
          if (elements.length) {
            for (const el of elements) {
              const dsCount = chart.data.datasets.length;
              for (let i = 0; i < dsCount; i++) {
               if (i !== el.datasetIndex) {
                //  chart.setDatasetVisibility(i, false);
               }
              }
            }
            // chart.update();
          } else {
            const dsCount = chart.data.datasets.length;
            for (let i = 0; i < dsCount; i++) {
              //  chart.setDatasetVisibility(i, true);
            }
            // chart.update();
          }
        },
        hover: {mode: "point",intersect: true},
        animation: {
          duration: 0
        },
        plugins: {
          title: {
            display:true,
            text:title,
            font: {
              weight:'bold',
              size:'18',
            }
          },
          legend: {
              display: false,
          }
      },
      layout: {
        padding: {
          right: 100,
        }
      },
        responsive: true,
        scales: {
            x: {
              ticks:{
                  display: true,                  
                  // autoSkip: true,
                  maxTicksLimit: 10,
              },
                title: {
                    display: true,
                    text: xLabel
                  },
                grid: {
                    display: false,
                    text: xLabel
                }
            },
            y: {
                  beginAtZero: true,
                  // min: 0,
                  // max: 725.5,
                  ticks: {
                    // stepSize: 5,
                    display: true,
                    // autoSkip:true,
                  },
                  title: {
                      display: true,
                      text: yLabel
                    },
                  grid: {
                  display: false,                
              }
            }
          }
      }
    });
    return chartObject
  }

第二张图表如下所示:

function createDVolGraph(chartId) {
  var ctx = document.getElementById(chartId).getContext('2d');
  const chartObject = new Chart(ctx, {
    type: 'line',
    data: {
        labels:[],
        datasets: [
        {
            yAxisID: 'A', // <-- the Y axis to use for this data set
            label: 'Bitcoin Perpetual',
            data:[],
            borderWidth: 2,
            borderDash:[2,2],
            backgroundColor: 'black',
            borderColor: 'black'
        },
        {
            yAxisID: 'B', 
            label: 'dVol',
            data:[],
            backgroundColor: 'blue',
            borderColor: 'blue'
        }
        ]
    },
    options: {
        responsive: true,
        scales: {          
          x: {
            ticks:{
                display: true,                  
                // autoSkip: true,
                // maxTicksLimit: 10,
            },
              title: {
                  display: true,
                },
              grid: {
                  display: false,
              }
          },  
          A: {
                type: 'linear',
                position: 'left',
                ticks: { beginAtZero: true, color: 'black' },
                // Hide grid lines, otherwise you have separate grid lines for the 2 y axes
                grid: { display: false }
            },
          B: {
              type: 'linear',
              position: 'right',
              ticks: { beginAtZero: true, color: 'blue' },
              grid: { display: false }
          },
            x: { ticks: { beginAtZero: true } }
        }
    }
    });
  return chartObject
}

第一张图表 X 轴如下所示:

第二张图表:

注意分钟的跳过,尽管 X 轴的数据完全相同,但一个人跳过 3 个其他人 6 个。

如何确保两者具有相同的 X 轴?

我正在使用 Charjs v3

javascript chart.js
© www.soinside.com 2019 - 2024. All rights reserved.