如何在chartjs中仅显示轴边框(无网格线)?

Qua*_*nda 5 chart.js

所以我只想显示轴边界线 - 并隐藏网格线。这是使用最新版本的 chart.js 包(2.9.3),我已经在如下所示的简化Codepen中复制了我的问题:

var myChart = new Chart(ctx, {
type: 'scatter',
data: {
  labels: [4, 0],
  datasets: [{
    data: [
      { group_name: "Group A", x: 4, y: 25 },
      { group_name: "Group B", x: 0, y: 0 },
    ],
  }],
},
options: {
      legend: { display: false },
      scales: {
        yAxes: [ {
          type: 'logarithmic',
          scaleLabel: { display: true, labelString: 'Active %', fontSize: 15 },
          position: 'left',
          gridLines: { display: false, drawBorder: true },
          ticks: {
            min: 0,
            max: 50,
            maxTicksLimit: 4,
            padding: 10,
            callback: value => `${value.toLocaleString()}%`,
          },
        } ],
        xAxes: [ {
          type: 'logarithmic',
          position: 'bottom',
          scaleLabel: { display: true, labelString: 'User Count', fontSize: 15 },
          gridLines: { display: false, drawBorder: true },
          ticks: {
            min: 0,
            maxTicksLimit: 6,
            padding: 10,
            callback: value => value.toLocaleString(),
          },
        } ],
      },
    }
});
Run Code Online (Sandbox Code Playgroud)

任何帮助或见解表示赞赏;我希望从文档中使用的设置似乎不起作用。

小智 5

您可以将此选项放在网格线属性中:

xAxes: [{
        gridLines: {
          display: true,
          drawBorder: true,
          drawOnChartArea: false
        }
     }]
Run Code Online (Sandbox Code Playgroud)

来源: https: //www.chartjs.org/samples/latest/scales/gridlines-display.html


Qua*_*nda 3

解决了(某种程度上)。当我降级到 Chart.js 时,2.8.0图表边框现在按预期显示。无论图表类型如何,边框2.9.3都根本不显示。