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)",],
  }
}

接下来，我们使用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）。

如何使x轴从chart.js图中的0开始？

1 个答案: