我在我的项目中使用ChartJS(更准确地说是在原始库之上构建的Angular 2的ng2-charts)。
我看到有一个选项:
图例:false | true
但是我发现能够删除 上部图例(例如,它描述了折线图中的每一行)。下面你可以看到我的意思:
我试过
.chart-legend {
visibility: hidden;
display: none;
}
但我认为这适用于其他一些传奇(下图)。 有没有办法自定义/隐藏上层图例?
另外,是否可以选择更改x / y轴标签方向? (例如,垂直显示,而不是对角线)
答案 0 :(得分:5)
创建图表时,可以为其提供一组图表选项。其中一个可能的选项是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一起使用,这是一个对以前版本的重大改变。
希望这有帮助!