如何在Chart.js中仅显示轴边界(无网格线)?

埃里克·弗斯潘(Eric Furspan)

所以我只想显示轴的边界线-并隐藏网格线。这使用的是最新版本的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(),
          },
        } ],
      },
    }
});

任何帮助或见解均表示赞赏;我希望从文档中可以使用的设置似乎无效。

埃里克·弗斯潘(Eric Furspan)

解决了(某种)。当我降级为chart.js时2.8.0,图表边框现在按预期显示。随着2.9.3边界并没有在所有显示,无论图表类型的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

熊猫:如何在pd.DataFrame.plot()中的x轴上显示较小的网格线

来自分类Dev

如何突出显示单个y轴网格线

来自分类Dev

如何在TreeTableView中显示行的网格线

来自分类Dev

如何在没有Y轴的情况下显示水平网格线?

来自分类Dev

如何使用 chart.js 仅绘制图形和 Xaxis 网格线

来自分类Dev

如何隐藏网格线但在chart.js上显示图例

来自分类Dev

chart.js:在y轴上隐藏特定的刻度线,并隐藏所有x轴网格线

来自分类Dev

chart.js:在y轴上隐藏特定的刻度线,并隐藏所有x轴网格线

来自分类Dev

chart.js在chartarea内部隐藏网格线,但保持y轴边框

来自分类Dev

如何使Microsoft Access Report中的所有网格线/边界一致

来自分类Dev

如何统一显示网格线?

来自分类Dev

如何内嵌显示网格线项目?

来自分类Dev

如何在谷歌图表中同时显示水平和垂直网格线

来自分类Dev

如何在jqplot中显示虚线网格线而不是实线

来自分类Dev

如何在chartist.js中调整网格线的间距?

来自分类Dev

如何使图表中的网格线静态

来自分类Dev

如何在Libreoffice Writer中打印网格线?

来自分类Dev

如何在Google图表中添加更多网格线?

来自分类Dev

如何在Matlab中绘制不同间距的网格线

来自分类Dev

轴在中间对齐时如何制作网格线?

来自分类Dev

轴在中间对齐时如何制作网格线?

来自分类Dev

如何在Chart JS中显示货币

来自分类Dev

如何仅使用pcolor / pcolormesh绘制网格线

来自分类Dev

如何在 Matlab 中用空 gridsquares 绘制网格(即显示网格线)

来自分类Dev

如何在chart.js中获取多个y轴?

来自分类Dev

如何在 Beyond Compare 4 中设置多条列线(网格线)?

来自分类Dev

如何在不使用setGridLinesVisible()方法的情况下永久显示GridPane对象网格线?

来自分类Dev

如何在QCustomPlot中隐藏网格并仅显示零线?

来自分类Dev

如何从Flot图表中删除网格线

Related 相关文章

  1. 1

    熊猫:如何在pd.DataFrame.plot()中的x轴上显示较小的网格线

  2. 2

    如何突出显示单个y轴网格线

  3. 3

    如何在TreeTableView中显示行的网格线

  4. 4

    如何在没有Y轴的情况下显示水平网格线?

  5. 5

    如何使用 chart.js 仅绘制图形和 Xaxis 网格线

  6. 6

    如何隐藏网格线但在chart.js上显示图例

  7. 7

    chart.js:在y轴上隐藏特定的刻度线,并隐藏所有x轴网格线

  8. 8

    chart.js:在y轴上隐藏特定的刻度线,并隐藏所有x轴网格线

  9. 9

    chart.js在chartarea内部隐藏网格线,但保持y轴边框

  10. 10

    如何使Microsoft Access Report中的所有网格线/边界一致

  11. 11

    如何统一显示网格线?

  12. 12

    如何内嵌显示网格线项目?

  13. 13

    如何在谷歌图表中同时显示水平和垂直网格线

  14. 14

    如何在jqplot中显示虚线网格线而不是实线

  15. 15

    如何在chartist.js中调整网格线的间距?

  16. 16

    如何使图表中的网格线静态

  17. 17

    如何在Libreoffice Writer中打印网格线?

  18. 18

    如何在Google图表中添加更多网格线?

  19. 19

    如何在Matlab中绘制不同间距的网格线

  20. 20

    轴在中间对齐时如何制作网格线?

  21. 21

    轴在中间对齐时如何制作网格线?

  22. 22

    如何在Chart JS中显示货币

  23. 23

    如何仅使用pcolor / pcolormesh绘制网格线

  24. 24

    如何在 Matlab 中用空 gridsquares 绘制网格(即显示网格线)

  25. 25

    如何在chart.js中获取多个y轴?

  26. 26

    如何在 Beyond Compare 4 中设置多条列线(网格线)?

  27. 27

    如何在不使用setGridLinesVisible()方法的情况下永久显示GridPane对象网格线?

  28. 28

    如何在QCustomPlot中隐藏网格并仅显示零线?

  29. 29

    如何从Flot图表中删除网格线

热门标签

归档