4

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

我看到有一个选项：

图例：假|真

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

在此处输入图像描述

我试过了

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

从Chartjs 传奇造型中汲取灵感

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

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

4

1 回答 1

13

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

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

希望这可以帮助！

于 2016-08-02T22:55:31.147 回答