有没有办法隐藏/自定义ChartJS＆＃39;以上传说？

Question

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

我看到有一个选项：

图例：false | true

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

我试过

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

从Chartjs Legend Styling获取灵感

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

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

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

希望这有帮助！