我正在嘗試使用"ng2-charts": "^2.3.0"
和"chart.js": "^2.8.0"
,呈現折線圖。圖表按預期顯示,但唯一的問題是我無法通過borderWidth
屬性增加線寬。
代碼:
import { SingleDataSet, Label, Color } from "ng2-charts";
import { ChartType, ChartOptions } from "chart.js";
public barChartType1: ChartType = "line";
public lineChartOptions: ChartOptions = {
responsive: true,
legend: { display: false },
scales: {
yAxes: [
{
display: false,
ticks: {
beginAtZero: false
},
scaleLabel: {
display: true,
labelString: '',
fontSize: 20,
}
},
]
},
elements: {
point:{
radius: 0,
borderWidth: 50
}
},
};
public lineChartColors: Color[] = [
{
borderColor: '#5081bd',
backgroundColor: 'transparent',
},
];
模板:
<canvas baseChart height="30vh" width="80vw"
[colors]="lineChartColors"
[datasets]="barChartDataSets1[customdata.index]"
[labels]="barChartLabels1[customdata.index]"
[options]="lineChartOptions"
[chartType]="barChartType1"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
輸入:
barChartDataSets1 [{"data":["2.00","2.00","2.00","2.00","2.00","2.00","2.00","2.00"]
barChartLabels1 [" "," "," ","ans1"," "," "," ","ans2"]
輸出:
對此有什么解決方案,為什么更改borderWidth
屬性不起作用?
uj5u.com熱心網友回復:
這是因為您將該選項放置在錯誤的命名空間中,而不是使用options.elements.point
您需要將其放置在options.elements.line
:
elements: {
point: {
radius: 0,
},
line: {
borderWidth: 8
}
},
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/385197.html
標籤:javascript 有角的 图表.js 折线图 ng2-图表