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

Question

我在我的项目中使用 ChartJS(更确切地说，Angular 2 的 ng2-charts 建立在原始库之上)。

我看到有一个选项:

图例:假|真

但是，我发现特别烦人的 tot 能够 删除 上图例 (例如，它描述了折线图中的每一行)。你可以在下面看到我的意思:



我试过

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

从 Chartjs Legend Styling 中汲取灵感

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

另外， 是否可以选择更改 x/y 轴标签方向 ？ (例如，垂直显示它们，而不是对角线)

Answer 1

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

options: {
    legend: { display: false }
}

虽然我没有使用过 ng2-charts，但查看 documentation(特别是图表示例)似乎您可以简单地定义一个图表图例 bool 值，如下所示:

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 一起使用，这是对以前的重大更改版本。

希望这可以帮助!