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

Question

我在项目中使用ChartJS（更确切地说，是在原始库的顶部构建的Angular 2的ng2-charts）。

我看到有一个选择：

图例：false | true

但是我发现特别恼人的TOT，以便能够除去所述上图例（其描述了例如折线图中的每一行）。在下面可以看到我的意思：

我尝试过

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

借鉴Chartjs Legend Styling的灵感

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

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

Answer 1

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

options: {
    legend: { display: false }
}

尽管我没有使用过ng2-charts，但仔细阅读文档（特别是图表示例），看来您可以像这样简单地定义图表图例布尔值：

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

希望这可以帮助！