Question

我使用ChartJS库来创建折线图。不知何故，Y值的值几乎被隐藏了。我想知道我是否有数据集，如何动态生成y值，以便它不会隐藏我的y值并仍然根据我的数据集选择自动缩放。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [1510001367000, 1510001379000, 1510001415000, 1510001427000],
        datasets: [
          {
            label: 'dataset 1',
            fill: false,
            backgroundColor: 'rgb(255, 99, 132)',
            data: [72, 72, 72, 72]
          },
          {
            label: 'dataset 2',
            fill: false,
            backgroundColor: 'rgb(54, 162, 235)',
            data: [70, 70, 70, 70]
          }
        ]
    },
    options: {
      responsive: true      
    }
});

.myChartDiv {
  width: 600px;
  height: 800px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="800"></canvas>
    </div>
  </body>
</html>

Answer 1

感谢您使用codepen，总是帮助您解决这些问题！

您可以通过添加以下缩放选项来设置yAxis的最小值/最大值：

options: {
      responsive: true,
      scales:{
        yAxes:[{
          ticks:{
            suggestedMin:69,
            suggestedMax:73
          }
        }]
      }
    }

这是一个分叉的CodePen

relevant docs here

您总是可以将最小值和最大值分别计算为（min - 1）和（max +1），以便始终获得1的偏移量。

更新：=================================

在您的CodePen中，您使用的是Chartjs 2.1.3，现在是旧版本。以下是如何构建一个简单的插件来向线性char min / max添加偏移量：

首先是插件：

// Define a plugin to provide data labels
Chart.pluginService.register({
  beforeUpdate: function(chart) {
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all datasets
    chart.data.datasets.forEach(function(dataset){
      var newMax = Math.max.apply(null, dataset.data);
      var newMin = Math.min.apply(null, dataset.data); 
      max = newMax > max ? newMax : max;
      min = newMin > min ? min : newMin;
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

现在您可以向选项添加customOffset属性：

 options: {
      customOffset: 0.1,
      responsive: true,
    }

看看这个CodePen

样本预览，其数据为0.5偏移量：

更新2 =========================

对插件进行小的更改，以便在隐藏一个数据集时，其他数据集居中并且图表的行为恰当：

Chart.pluginService.register({
  beforeUpdate: function(chart){
    console.log("beforeUpdate");
    // get custom defined offset
    var offset = chart.options.customOffset;
    // exisit gracefully if offset not defined or less than 0
    if(!offset || offset < 0) return;

    // preset the min and max
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;

    // find min/max values of all dataset
    chart.data.datasets.forEach(function(dataset){
      if(!dataset._meta[0].hidden){
        console.log(dataset)
        var newMax = Math.max.apply(null, dataset.data);
        var newMin = Math.min.apply(null, dataset.data); 
        max = newMax > max ? newMax : max;
        min = newMin > min ? min : newMin;
      }
    });
    // change min and max tick values
    chart.options.scales.yAxes[0].ticks.max = max + offset;
    chart.options.scales.yAxes[0].ticks.min = min - offset;
  }
});

CodePen

更新3 =========================

这是一个插件，用于向图表中的所有Y轴添加偏移量：

Chart.pluginService.register({
    beforeUpdate: function(chart){
      console.log("beforeUpdate");
      // get custom defined offset
      var offset = chart.options.customOffset;
      // exisit gracefully if offset not defined or less than 0
      if(!offset || offset < 0) return;
      var yAxes = chart.options.scales.yAxes;
      for(var i=0; i<yAxes.length; i++){
        var axis = yAxes[i];
        var datasets = chart.data.datasets;
        var max = Number.MIN_VALUE;
        var min = Number.MAX_VALUE;
        var datasetsOnAxis = [];

        for(var j=0; j<datasets.length; j++){ // add datasets for this axes to datasetsOnAxis
          var dataset = datasets[j];
          var meta = chart.getDatasetMeta(j);
          if  (meta.yAxisID === axis.id) datasetsOnAxis.push(dataset); 
        }

        for(var k=0; k<datasetsOnAxis.length; k++){
          var dataset = datasetsOnAxis[k]
          var newMax = Math.max.apply(null, dataset.data);
          var newMin = Math.min.apply(null, dataset.data);
          max = newMax > max ? newMax : max;
          min = newMin > min ? min : newMin;
        }
        axis.ticks.max = max + offset;
        axis.ticks.min = min - offset;   
      }
    }
});

Y轴上的值消失（隐藏在标签下）

1 个答案: