Question

我有一张图表，y轴比例似乎是错误的。

这里是输入的数据。

data: {
        labels: [1, 2, 3, 4, 5, 6],
        datasets: [
                     {
                        label: '911',
                        lineTension: 0,
                        fill: false,
                        borderColor: '#4cfbb3', // (random) 
                        data: [ 10381, 11381, 19381, 19381, 2381 ]
                     }
                  ]
      }

图表： functions documentation.

如您所见，第1天的数据应分别绘制在大约10k的图表上，而图表刚好在6k以上。此外，最高值为19381，甚至是两次，在图表上它显示最高值为12k。

由于该数据刻度一直在变化，因此我无法精确设置硬编码的刻度。这是JSON的其余部分：

{
      type:'line',
      data:{
        labels:[],
        datasets:[]
      },
      options:{
        legend: {
          display: true,
          position: 'top',
          fontColor: 'white',
          fontSize: 20,
          labels: {
            fontColor: 'white',
            fontSize: 20
          }
        },
        responsive: true,
        scales: {
          yAxes: [{
            stacked: false,
            scaleLabel: {
              display: true,
              fontColor: 'white',
              fontSize: 25,
              labelString: 'Faction Points'
            },
            ticks: {
              fontColor: 'white',
              fontSize: 20,
              min: 0
            }
          }],
        xAxes: [{
          stacked: false,
          scaleLabel: {
            display: true,
            fontColor: 'white',
            fontSize: 25,
            labelString: 'Day'
          },
          ticks: {
            fontColor: 'white',
            fontSize: 20,
            min: 0
          }
        }]
        }
      }
    }

任何有关如何解决此问题的帮助将不胜感激，谢谢！

Answer 1

鉴于您的代码，我只是添加了color中yAxis.gridLines的更改，以更好地可视化不同点的确切位置。对我来说，这看起来不错。还请发布您的CSS定义。

yAxes: [{
  ...
  gridLines: {
    color: 'white'
  }

new Chart("scurve_chart", {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: [{
      label: '911',
      lineTension: 0,
      fill: false,
      borderColor: '#4cfbb3', // (random) 
      data: [10381, 11381, 19381, 19381, 2381]
    }]
  },
  options: {
    legend: {
      display: true,
      position: 'top',
      fontColor: 'white',
      fontSize: 20,
      labels: {
        fontColor: 'white',
        fontSize: 20
      }
    },
    responsive: true,
    scales: {
      yAxes: [{
        stacked: false,
        scaleLabel: {
          display: true,
          fontColor: 'white',
          fontSize: 25,
          labelString: 'Faction Points'
        },
        ticks: {
          fontColor: 'white',
          fontSize: 20,
          min: 0
        },
        gridLines: {
          color: 'white'
        }
      }],
      xAxes: [{
        stacked: false,
        scaleLabel: {
          display: true,
          fontColor: 'white',
          fontSize: 25,
          labelString: 'Day'
        },
        ticks: {
          fontColor: 'white',
          fontSize: 20,
          min: 0
        }        
      }]
    }
  }
});

div {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<div>
  <canvas id="scurve_chart"></canvas>
</div>

ChartJS Y轴比例值错误

1 个答案: