Monday is not showing on a week timeframe
上下文（代码下方的详细信息）
我正在使用 apexchart 库中的图表并在 vue 框架上使用它。 显示每一天的名称，只有一周的第一天不显示
| Vue js脚本文件|
<script lang="ts">
import Vue, { PropType } from 'vue';
import { VueApexChartsComponent } from '../interface/vueapexchartcomponent';
type Chartfields = {
name: string;
data: [];
type: string;
}
export default Vue.extend({
name: 'chart',
props: {
chartseries: {
type: Object as () => Chartfields[]
},
timeperiod: String as PropType<string>,
loading: {
type: Boolean,
default: false
},
},
data: () => ({
title: 'Issues',
timeperiod: 'Week',
intervals: ['Week', 'Month'],
chartseries: {},
chartOptions: {
chart: {
id: 'issuechart',
type: 'area',
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
xaxis: {
type: 'datetime',
labels: {
format: 'dddd'
},
},
yaxis: {
show: true
},
tooltip: {
x: {
format: 'dddd'
}
}
}
}),
methods: {
updateChart () {
if (this.timeperiod == 'Month') {
const chart = this.$refs.chart as VueApexChartsComponent;
chart.updateOptions({
series: [{
name: 'Current',
data: [30, 40, 60, 30, 40, 40, 30, 30, 40, 60, 30, 40, 40, 30, 30, 40, 60, 30, 40, 40, 30, 30, 40, 60, 30, 40, 40, 30, 40, 60, 30],
type: 'column'
}, {
name: 'Average',
data: [35, 45, 55, 35, 45, 45, 35, 35, 45, 55, 35, 45, 45, 35, 35, 45, 55, 35, 45, 45, 35, 35, 45, 55, 35, 45, 45, 35, 45, 55, 35],
type: 'line'
// color: #FFA500
}, {
name: 'Previous',
data: [25, 35, 45, 35, 45, 40, 28, 25, 35, 45, 35, 45, 40, 28, 25, 35, 45, 35, 45, 40, 28, 25, 35, 45, 35, 45, 40, 28, 25, 35, 45],
type: 'column',
color: '#C2CCC5'
}],
xaxis: {
type: 'datetime',
labels: {
format: 'dd'
},
categories: [
'2021-03-01T00:00:00.000Z',
'2021-03-02T00:00:00.000Z',
'2021-03-03T00:00:00.000Z',
'2021-03-04T00:00:00.000Z',
'2021-03-05T00:00:00.000Z',
'2021-03-06T00:00:00.000Z',
'2021-03-07T00:00:00.000Z',
'2021-03-08T00:00:00.000Z',
'2021-03-09T00:00:00.000Z',
'2021-03-10T00:00:00.000Z',
'2021-03-11T00:00:00.000Z',
'2021-03-12T00:00:00.000Z',
'2021-03-13T00:00:00.000Z',
'2021-03-14T00:00:00.000Z',
'2021-03-15T00:00:00.000Z',
'2021-03-16T00:00:00.000Z',
'2021-03-17T00:00:00.000Z',
'2021-03-18T00:00:00.000Z',
'2021-03-19T00:00:00.000Z',
'2021-03-20T00:00:00.000Z',
'2021-03-21T00:00:00.000Z',
'2021-03-22T00:00:00.000Z',
'2021-03-23T00:00:00.000Z',
'2021-03-24T00:00:00.000Z',
'2021-03-25T00:00:00.000Z',
'2021-03-26T00:00:00.000Z',
'2021-03-27T00:00:00.000Z',
'2021-03-28T00:00:00.000Z',
'2021-03-29T00:00:00.000Z',
'2021-03-30T00:00:00.000Z',
'2021-03-31T00:00:00.000Z']
},
});
} else {
const chart = this.$refs.chart as VueApexChartsComponent;
chart.updateOptions({
series: [{
name: 'Current',
data: [30, 40, 60, 30, 40, 40, 30],
type: 'column'
},
{
name: 'Average',
data: [35, 45, 55, 35, 45, 45, 35],
type: 'line'
},
{
name: 'Previous',
data: [25, 35, 45, 35, 45, 40, 28],
color: '#C2CCC5',
type: 'column'
}],
xaxis: {
categories: [
'2021-03-01T00:00:00.000Z',
'2021-03-02T00:00:00.000Z',
'2021-03-03T00:00:00.000Z',
'2021-03-04T00:00:00.000Z',
'2021-03-05T00:00:00.000Z',
'2021-03-06T00:00:00.000Z',
'2021-03-07T00:00:00.000Z'],
type: 'datetime',
labels: {
format: 'dddd'
},
},
yaxis: {
show: true
},
tooltip: {
x: {
format: 'dddd'
}
}
});
}
}
},
mounted () {
this.updateChart();
}
});
</script>
详情
我不是一个有经验的开发人员，这是我在 Stackoverflow 上的第二篇文章
这是我尝试过的；
- 只需 ctrl 和 -/+。这意味着我尝试放大和缩小，因为它可能需要更多的宽度，但这不起作用
- 我尝试使用 31-02-2021 到 06-03-21（通常是 01-03-2021 到 07-03-21）的时间跨度。这意味着数据的第一天是星期日，最后一天是星期六。这样做的结果是，它不是在星期日开始，而是在星期一显示，但只有当我将鼠标悬停在它上面时，它才起作用，因为它们不是星期一的标签。图表显示了周一到周六的时间跨度，而我使用了周日到周六的日期
- 我还通过实现以下内容更改了 xaxis 标签的宽度
xaxis: {
labels: {
format: 'dddd',
maxWidth: 200
},
-最近一次尝试使用了 14 天的时间跨度。这样做的结果是第一个星期一没有显示，而其余标签显示每一天的名称。 （哎呀）
-任何人都可以试试这个，看看你是否有同样的问题，因为我找不到解释