Chartjs:如何确保它总是在Y轴上创建特定的刻度

xxls0lw8  于 2023-03-02  发布在  Chart.js
关注(0)|答案(1)|浏览(230)

我试图创建一个双Y轴图表的RSI和价格,其中我想标签Y轴的RSI为:0,10,20...100
我正在使用Chartjs v3
问题是,尽管设置minmaxstepSize为0,它并没有保持Y轴固定。我怎么做呢?下面是我的代码:

function createDoubleLineGraph(chartId,chartTitle,y1Label,y2Label,y1Color,y2Color) {
    const ctx = document.getElementById(chartId).getContext('2d');
    const chartObject = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Friday', 'Saturday', 'Sunday', 'Monday'],
        datasets: [
            {
                yAxisID: 'A', // <-- the Y axis to use for this data set
                label: y1Label,
                data: [],
                borderWidth: 1,
                backgroundColor: y1Color,
                borderColor: y1Color,            
            },
            {
                yAxisID: 'B', // <-- the Y axis to use for this data set
                label: y2Label,
                data: [],
                backgroundColor: y2Color,
                borderColor: y2Color,
                ticks: {
                    beginAtZero: false,
                },
            }
        ]
    },
    options: {
        plugins: {
            title: {
              display:true,
              text:chartTitle,
              font: {
                weight:'bold',
                size:'18',
              }
            },
        },
        responsive: true,
        scales: {
        x: {
            grid: {display: false},
            title: {
                display: true,
                text: 'Date',
                font: {
                    weight:'bold',
                    size:'14',
                    }
                },
            ticks:{
                display: true,                  
                // autoSkip: true,
                // maxTicksLimit: 10,
            }
        },
        A: {
            type: 'linear',
            position: 'right',
            ticks: { beginAtZero: true, color: 'red',min:0,max:100,suggestedMax: 100,stepSize:5},
            // Hide grid lines, otherwise you have separate grid lines for the 2 y axes
            grid: { display: false }
        },
        B: {
            type: 'linear',
            position: 'left',
            ticks: { beginAtZero: true, color: 'black' },
            grid: { display: false }
        },
        x: { ticks: { beginAtZero: true } }
        }
    }
    });
    return chartObject
}
bjg7j2ky

bjg7j2ky1#

在标记为“A”的Y轴的选项中,已将beginAtZero属性设置为true,这意味着即使数据中的最小值大于0,刻度也将始终从0开始。如果希望刻度固定在0到100之间,则应将beginAtZero设置为false,并使用min和max属性设置刻度的最小值和最大值。
以下是“A”Y轴的更新代码:

A: {
  type: 'linear',
  position: 'right',
  ticks: { 
    min: 0,
    max: 100,
    stepSize: 10,
    color: 'red'
  },
  grid: { display: false }
},

这将在0,10,20,...,100处创建刻度,步长为10,刻度将始终从0开始并在100结束。希望它能帮上忙!

相关问题