在此处输入图像描述
html.file
<div style="display: block; width: 400px">
<canvas
*ngIf="loaded"
baseChart
[data]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
ts.file
barChartOptions: ChartConfiguration['options'] = {
responsive: true,
scales: {
yAxes:[{
ticks: {
stepSize: 2.5,
beginAtZero: true
}
}]
}
};
barChartLabels: string[] = [];
barChartType: ChartType = 'bar';
barChartLegend: boolean = true;
barChartData: any[] = [];
loaded = false;
this.service.Salescount(form).subscribe((data) => {
this.name = data.result;
this.barChartLabels = this.name.map((item) => item.name);
this.barChartData = this.name.map((item) => item.sales);
this.loaded = true;
}
我正在使用的版本"；chart.js"："2.9.4"ng2图表"："2.4.2"；。我想赚100000到1k，并在yaxis 中隐藏0
除非你有一个非常大的屏幕，否则stepSize不会是你想要的1000，因为没有足够的空间来渲染所有这些记号。既然你想要99个刻度。
但是，要更改记号的颜色，可以使用记号配置中的fontColor属性。要使其从100K到1K，您可以将最大值设置为100K，将最小值设置为1K，如下所示：
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [90000, 10009, 30000, 50000, 100000, 30000],
backgroundColor: 'pink'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
fontColor: 'red',
max: 100000,
min: 1000,
stepSize: 1000
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>