有没有办法 hide/customize ChartJS' 以上图例？

Question

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

我看到有一个选项：

图例：false|true

但是我发现能够删除 上图例（例如描述折线图中的每一行）特别烦人).下面你可以明白我的意思：

我试过

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

从

中汲取灵感

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

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

Answer 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，这是对之前版本的重大改变。

希望对您有所帮助！

有没有办法 hide/customize ChartJS' 以上图例？

Is there a way to hide/customize ChartJS' above legend?

chart.js

ng2-charts