有没有办法隐藏/自定义 ChartJS 上面的图例？

Posted 2023-02-16

【中文标题】有没有办法隐藏/自定义 ChartJS 上面的图例？

【英文标题】：Is there a way to hide/customize ChartJS' above legend?

【发布时间】：2016-12-07 21:23:12

【问题描述】：

我在我的项目中使用 ChartJS（更准确地说是 ng2-charts for Angular 2 构建在原始库之上）。

我看到有一个选项：

图例：假|真

但是，我发现能够删除 上部图例（例如，它描述折线图中的每一行）特别烦人。您可以在下面看到我的意思：

我试过了

.chart-legend 
  visibility: hidden;
  display: none;

从Chartjs Legend Styling获得灵感

但我认为这适用于其他一些传说（底部传说）。 有没有办法自定义/隐藏上图例？

另外，是否有更改 x/y 轴标签方向的选项？ （例如，垂直显示它们，而不是对角线）

【参考方案1】：

创建图表时，您可以为其提供一组图表选项。可能的选项之一是Legend Configuration。要隐藏图例，只需使用如下选项：

options: 
    legend:  display: false 

虽然我没有使用过 ng2-charts，但通过 documentation（特别是图表示例）看起来你可以像这样简单地定义一个图表图例布尔值：

public lineChartLegend:boolean = true;

然后像这样将此值添加到图表中：

   <base-chart class="chart"
                   ...
                   [legend]="lineChartLegend"
                   [chartType]="lineChartType"
                   ...></base-chart>

最后，Chartjs Legend Styling 解决方案不起作用的可能原因是它是为 chart.js v1.x 设计的，而 ng2-charts 似乎适用于 chart.js v2.x，这是一个重大变化到以前的版本。

希望这会有所帮助！

【讨论】：

将其添加到选项（ng2-charts 中的 [options]）有效。谢谢！