Typescript 周图表上没有显示阿佩克斯哈特周一的标签
上下文(代码下面的详细信息) 我正在使用apexchart库中的图表,并将其用于vue框架。 每天的名称都会显示,只有一周的第一天不会显示 |Vue js脚本文件|Typescript 周图表上没有显示阿佩克斯哈特周一的标签,typescript,vue.js,apexcharts,Typescript,Vue.js,Apexcharts,上下文(代码下面的详细信息) 我正在使用apexchart库中的图表,并将其用于vue框架。 每天的名称都会显示,只有一周的第一天不会显示 |Vue js脚本文件| <script lang="ts"> import Vue, { PropType } from 'vue'; import { VueApexChartsComponent } from '../interface/vueapexchartcomponent'; type Chartfields
<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>
-最近的尝试使用了14天的时间跨度。这样做的结果是,第一个星期一不显示,而其余的标签显示每天的名称。(伊克斯)
-有人可以尝试一下,看看你是否有同样的问题,因为我找不到解释而不是添加lorem ipsum占位符文本,你可以添加一些关于你在调试方面已经尝试过的内容的详细信息吗(例如,14天只显示13天标签,尝试了不同的标签格式)?这有助于其他人回答你的问题。也是一个很好的参考指南。@OscarSchafer感谢您的反应。我更改了标题并添加了一些细节。
xaxis: {
labels: {
format: 'dddd',
maxWidth: 200
},