有没有办法改变日期的显示
is there a way to change the dispaly of a date
我在我的图表应用程序中使用 ChartJs 库。目前我有一张图表显示了一个月中的 31 天,但由于日期很多,日期显示如下:
但我实际上需要这样的它们:
有没有人知道如何更改它们的显示方式,从而使日期显示在月份下方或相反的位置。
目前我的代码看起来像这样:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.map(x => moment(x.date).format("MMM Do")),
datasets: [{
data: data.map(x => x.premium),
backgroundColor: '#ffec87',
borderColor: "#ffec87",
borderWidth: 2,
borderStyle: 'dotted'
}]
},
options: {
scales: {
xAxis: { grid: { display: false } },
yAxis: { grid: { borderDash: [3, 5] } }
}
}
});
您可以通过在数组中提供标签来使用多行标签,如下所示:
var options = {
type: 'line',
data: {
labels: [
[
"Red",
"second line"
],
[
"Blue",
"second line"
],
[
"Yellow",
"second line"
],
[
"Green",
"second line"
],
[
"Purple",
"second line"
],
[
"Orange",
"second line"
]
],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
我在我的图表应用程序中使用 ChartJs 库。目前我有一张图表显示了一个月中的 31 天,但由于日期很多,日期显示如下:
但我实际上需要这样的它们:
有没有人知道如何更改它们的显示方式,从而使日期显示在月份下方或相反的位置。 目前我的代码看起来像这样:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.map(x => moment(x.date).format("MMM Do")),
datasets: [{
data: data.map(x => x.premium),
backgroundColor: '#ffec87',
borderColor: "#ffec87",
borderWidth: 2,
borderStyle: 'dotted'
}]
},
options: {
scales: {
xAxis: { grid: { display: false } },
yAxis: { grid: { borderDash: [3, 5] } }
}
}
});
您可以通过在数组中提供标签来使用多行标签,如下所示:
var options = {
type: 'line',
data: {
labels: [
[
"Red",
"second line"
],
[
"Blue",
"second line"
],
[
"Yellow",
"second line"
],
[
"Green",
"second line"
],
[
"Purple",
"second line"
],
[
"Orange",
"second line"
]
],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>