javascript - 如何使ChartJS中的Line不超过yAxes的最大值

Question

我希望此 ChartJS 中的线条不要超过最大 yAxes，或者换句话说，即使 datasets.data 超过 yAxes，线条仍保留在元素内，我自己搜索了文档但没有找到它

像这样

不是这样的

这是我的代码

// Chartjs
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['SUN', 'MON', 'TUE', 'WED', 'THU', "FRI", 'SAT'],
        datasets: [{
            label: 'Daily Data',
            data: [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000],
            borderColor: '#3f89fb',
            borderWidth: 3,
            fill: false
        }]
    },
    options: {
      scales: {
        // X or Horizontal
        xAxes: [{
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
          }
        }],
        // Y or Vertical
        yAxes: [{
            stacked: true,
            ticks: {
              beginAtZero:true,
              max: 1000000,
              min: 0,
              stepSize: 200000,
              callback: function(value, index, values) {
                return value / 1e6 + 'M';
              }
            },
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }]
      },
      // Tooltips
      tooltips: {
        callbacks: {
          label: function(tooltipItem, chart) {
            let datasetsData = chart.datasets[0].data[tooltipItem.index];
            if (datasetsData.toString().length <= 6) {
              return 'Income Rp. '+datasetsData.toLocaleString() + 'K';
            }else {
              return 'Income Rp. '+datasetsData.toLocaleString() + ' M';
            }
          }
        }
      }
    }
});

Answer 1

根据您的代码，您可以执行以下操作: 将您的数据移动到像

这样的 var

var myData = [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000];

然后将数据字段更改为 data: myData, 然后将您的刻度更改为

        ticks: {
          beginAtZero:true,
          max: Math.max.apply(Math, myData), //Sets the max to the max data you have
          min: 0,
          stepSize: 200000,
          callback: function(value, index, values) {
            return value / 1e6 + 'M';
          }
        },

您可以添加一些东西到最大值以使其更大一点。