Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Typescript 周图表上没有显示阿佩克斯哈特周一的标签_Typescript_Vue.js_Apexcharts - Fatal编程技术网

Typescript 周图表上没有显示阿佩克斯哈特周一的标签

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

上下文(代码下面的详细信息)

我正在使用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>
-最近的尝试使用了14天的时间跨度。这样做的结果是,第一个星期一不显示,而其余的标签显示每天的名称。(伊克斯)


-有人可以尝试一下,看看你是否有同样的问题,因为我找不到解释

而不是添加lorem ipsum占位符文本,你可以添加一些关于你在调试方面已经尝试过的内容的详细信息吗(例如,14天只显示13天标签,尝试了不同的标签格式)?这有助于其他人回答你的问题。也是一个很好的参考指南。@OscarSchafer感谢您的反应。我更改了标题并添加了一些细节。
xaxis: {
   labels: {
       format: 'dddd',
       maxWidth: 200
   },