如何摆脱 ChartJS 中的轴线？答案

【问题标题】：How to get rid of axis lines in ChartJS?如何摆脱 ChartJS 中的轴线？
【发布时间】：2018-06-23 11:58:38
【问题描述】：

我已经用 ChartJS 玩了两天了，我似乎无法摆脱浅灰色的轴线（无论是垂直还是水平）。

Screenshot of my chart, indication the lines I'd like to remove

因为它是一个 Laravel 项目，所以我正在使用 ConsoleTV 的 Charts 包。图表代码如下：

$this->options([
      'legend' => [
        'display' => false
      ],
      'scales' => [
        'xAxes' => [
          'gridLines'=> [
            'drawOnChartArea' => 'false',
            'display' => 'false',
          ],
          'display' => 'false',
        ],
      ],
      'elements' => [
        'line' => [
          'backgroundColor' => 'rgba(71, 15, 244, 0.2)',
          'borderColor' => '#470ff4'
        ],
      ],
      'title' => [
        'display' => false,
      ]
    ]);

...渲染成...（一行）：

options: {"maintainAspectRatio":false,"scales":{"xAxes":{"gridLines":{"drawOnChartArea":"false","display":"false"},"display":"false"},"yAxes":[{"ticks":{"beginAtZero":true}}]},"legend":{"display":false},"elements":{"line":{"backgroundColor":"rgba(71, 15, 244, 0.2)","borderColor":"#470ff4"}},"title":{"display":false}}

为了便于阅读，我尝试对其进行格式化：

options: 
   {"maintainAspectRatio":false,
    "scales":{
      "xAxes":{
        "gridLines": {
          "drawOnChartArea":"false",
          "display":"false"
        },
      "display":"false"
     },
     "yAxes":
       [{"ticks":{
         "beginAtZero":true
         }}
        ]},
     "legend":{"display":false},"elements":{"line":{"backgroundColor":"rgba(71, 15, 244, 0.2)","borderColor":"#470ff4"}},"title":{"display":false}}

如您所见，我已经尝试将几个显示值设置为false。任何帮助将不胜感激！

提前致谢。

编辑到目前为止没有帮助的是添加这条线，尽管我完全相信它应该工作。这没有意义。我也查看了其他解决方案，但是给出的答案不起作用。

脚本的加载顺序：负责人：1. ChartJS 正文：1. 图表画布，2. 图表配置

$this->options([
          'scales' => [
            'xAxes' => [
              'gridLines'=> [
                 'lineWidth' => 0
              ]
            ],
            'yAxes' => [
              'gridLines'=> [
                 'lineWidth' => 0
              ]
            ],
          ],
        ]);

【问题讨论】：

Chart.js v2 - hiding grid lines的可能重复
嗯，关键是那里提供的解决方案对我不起作用，不知何故。
我刚刚在 Laravel Charts 包的 GitHub 页面上打开了一个问题。 github.com/ConsoleTVs/Charts/issues/387

标签： laravel chart.js laravel-5.5 laravel-5.6 chartjs-2.6.0

【解决方案1】：

我找到了一种方法来禁用 Laravel Charts（由 ConsoleTV）ChartJS 上的轴。包本身有两种方法可以做到这一点。

在图表的模板类中，我添加了这两个函数：

public function __construct()
     {
       parent::__construct();
       // ...

       $this->displayAxes(false);
       $this->minimalist(true);

       // ...
     }

【讨论】：