如何使ChartJS中的行不超过yAxes的最大值

时间:2018-10-29 13:24:02

标签: javascript chart.js

我希望此ChartJS中的行不超过最大yAxes,换句话说,即使datasets.data超过yAxes,该行仍停留在元素内,我自己搜索了文档但没有找到

enter image description here

不喜欢这样 enter image description here

这是我的代码

// 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';
            }
          }
        }
      }
    }
});

1 个答案:

答案 0 :(得分:1)

给出您的代码,您可以执行以下操作: 将您的数据移动到

之类的变量中
var myData = [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000];

然后将您的数据字段更改为data: myData, 然后将“ Ticks”更改为

        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';
          }
        },

您可以添加一些内容以使其更大一些。