如何更改标签颜色并设置 y 轴值 1k 间隔并隐藏 y 轴？
Posted
技术标签:
【中文标题】如何更改标签颜色并设置 y 轴值 1k 间隔并隐藏 y 轴？【英文标题】：how to change the label color and set y-axis values 1k intervals and hide y-axis? 【发布时间】：2022-01-18 01:09:36 【问题描述】：enter image description here
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.文件
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-charts”：“^2.4.2”。我想将 100000 设为 1k 并在 yaxis 中隐藏 0
【问题讨论】：
【参考方案1】：除非你有一个非常大的屏幕，否则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" ></canvas>
</body>【讨论】：
以上是关于如何更改标签颜色并设置 y 轴值 1k 间隔并隐藏 y 轴？的主要内容，如果未能解决你的问题，请参考以下文章