Chartjs：仅使用 yAxis 零刻度绘制图表

Question

见鬼去吧

我想画这样的图表：

目前，我可以使用 afterBuildTicks 仅获取零 yAxis。但问题是所有其他的蜱也被删除了。所以不确定我们是否有办法绘制零刻度并隐藏除标签之外的其他刻度。

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Value 1', 'Value 2', 'Value 3', 'Value 4'],
    datasets: [{
      label: "Dataset",
      data: [20, 15, 27, 18],
      backgroundColor: 'rgba(54, 162, 235,0.5)',
    }],
  },
  options: {
  responsive: true,
    elements: {
      line: {
        fill: false
      }
    },
  scales: {
    xAxes: [
      {
        position: 'top',
        display: true,
        gridLines: {
          display: true,
        },
        stacked: true,
        ticks: {
          fontColor: "#C4C4C4",
          fontSize: 10,
        }
      }
    ],
    yAxes: [
      {
        type: 'linear',
        display: true,
        position: 'right',
        id: 'y-axis-1',
        gridLines: {
          display: true,
        },
        labels: {
          show: true
        },
        stacked: false,
        ticks: {
          fontColor: "#C4C4C4",
          fontSize: 10,
          precision: 0,
          suggestedMax: 100,
          suggestedMin: -100
        },
        afterBuildTicks:function (axis) {
        axis.ticks = [0]
        }
      }
    ]
  },
  tooltips: {
    mode: 'label',
    bodySpacing: 10,
    titleMarginBottom: 10,
    titleFontSize: 14,
    titleFontStyle: 'bold',
    footerAlign: 'right',
    callbacks: {
      label: (tooltipItem, data) => {
        const label = data.datasets[tooltipItem.datasetIndex].label || ''
        const value = tooltipItem.value
        return `   ${label}: ${value}`
      }
    }
  }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

非常感谢

Answer 1

我找到了使用的解决方案：gridLines options to draw chart with width is zero:

gridLines: {
  display: true,
  tickMarkLength: 10,
  lineWidth: 0
}