如何使Chart.js图表​​中的x轴从0开始？

Question

我正在使用chart.js库，但遇到了问题。我希望年份轴从0开始。现在从负值开始（在我的情况下为-50）。

目前，它是这样来的-

我想要的是-

我正在尝试-

var config = {
  type: 'bar',
  data: {
    labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
    datasets: [{


      type: 'line',
      label: 'Accumulative Flow',
      data: [0, -50, 20, 30, 40, 50],
      borderColor: 'red',
      fill: false,
      lineTension: 0,
      borderJoinStyle: 'miter',
      xAxes: [{
        barPercentage: 0.4
      }]
    }, {
      type: 'bar',
      label: 'Benifit(One time)',
      backgroundColor: "#005998",
      data: [40, 50, 60, 80, 50, 60],
    }, ]
  },
  options: {
    title: {
      display: true,
      text: 'Custom Chart Title'
    },
    scales: {
      xAxes: [{
        time: {
          displayFormats: {
            quarter: ' YYYY'
          }
        },

        beginAtZero: true,
        barPercentage: 0.3,
        id: 'x-axis-label',
        position: 'bottom',
        scaleStartValue: 20,
        gridLines: {
          display: false
        },
      }],
      yAxes: [{

        id: 'y-axis-label',
        ticks: {
          max: 300,
          min: -50,
          stepSize: 50,
        },
        position: 'left',
        gridLines: {
          display: false
        },
      }]
    },
    legend: {
      position: 'right'
    },
    maintainAspectRatio: false,
    scaleBeginAtZero: true


  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

.GraphContain {
  max-height: 500px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div class="GraphContain">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

有任何参数可以做到这一点吗？

提前致谢！

Answer 1

在阅读了核心比例尺来源之后，我想出了一种方法来配置您的图表，使其非常接近您期望的行为。

它要求我们手动设置网格线颜色以及操纵内部比例实例ticks数组（比例绘制方法使用它在画布上绘画）。

首先，为了隐藏某些网格线但显示其他网格线，我使用了该gridLines.color属性并传入了一个颜色数组，其中第一个索引颜色是默认的网格线颜色，而所有其他颜色都是白色（第一个索引用于为“零”着色网格线）。请注意，由于我们稍后将要处理内部比例尺ticks数组，因此必须为颜色数组添加额外的索引，并使用白色。这是我的意思的一个例子。

gridLines: {
    // since we only want to show the "zero line" gridline (chart.js
    // uses the color of the first index to paint this line), we
    // set the first index to the default color and all others to white
    // note, later we add a "dummy" tick (explained later) so the length
    // of this array has to be 1 greater than the number of gridlines you
    // want displayed
    color: [
      "rgba(0, 0, 0, 0.1)", // this is for the zero line
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",
      "rgb(255, 255, 255)",],
  }
}

接下来，我们使用afterTickToLabelConversionscale回调配置属性来操纵内部scale ticks数组，以强制网格线显示为所需的样子。这是适用于您的用例的实现。

// we will use this callback to manipulate the ticks array
// before they are drawn on the canvas
afterTickToLabelConversion: function(scaleInstance) {
  // the top gridline (which is at index 0) is always shown 
  // so to overcome this we add a "dummy" tick at index 0
  scaleInstance.ticks.unshift(null);

  // we have to do the same this to this tick array as well
  // because it uses the values in this array to map to the data
  scaleInstance.ticksAsNumbers.unshift(null);

  // since we have added an extra tick, we need to move the 
  // zero line index to point to the new index of 0
  scaleInstance.zeroLineIndex++
}

因此，将所有这些放在一起，您将得到一个看起来像这样的图表。

请查看此Codepen中的工作示例（注意，我留下了其他尝试来解决此问题的方法，因此请参阅底部的选项3）。