javascript - 如何使 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>

Is there any parameter to do this ?

提前致谢!

Answer 1

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

它需要我们手动设置网格线颜色以及操作内部比例尺实例 ticks 数组(比例尺绘制方法使用它在 Canvas 上绘画)。

首先，为了隐藏一些网格线但显示其他网格线，我使用了 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)",],
  }
}

接下来，我们使用 afterTickToLabelConversion scale callback configuration property操纵内部刻度 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)。