Question

我的数据存在问题，因为时间轴未显示在我的网站上组件代码如下：

<template>
<div>
    <card class="card-chart" no-footer-line>
        <template slot="header">
            <h5 class="card-category">Timeline</h5>
            <h3 class="card-title">
                <i class="tim-icons icon-chart-bar-32 text-primary "></i> Timeline spend
            </h3>
        </template>
        <div class="chart-area">
            <line-chart
              :chartData="lineChart1.chartData"
              :gradient-colors="lineChart1.gradientColors"
              :gradient-stops="lineChart1.gradientStops"
              :extra-options="lineChart1.extraOptions"
              :height="200">
            </line-chart>
          </div>
    </card>
</div>
</template>
<script>
import { GChart } from 'vue-google-charts'
import LineChart from 'src/components/Charts/LineChart';
import config from '@/config';
import * as chartConfigs from '@/components/Charts/config';
export default {
name: "ClientDashboardsTimeline",
components: {
    GChart,
    LineChart
},
data() {
    return{
            lineChart1: {
                chartData: {
                  labels: this.timelineData.dates,
                  datasets: [
                    {
                      label: 'Label for data',
                      fill: true,
                      borderColor: config.colors.primary,
                      borderWidth: 2,
                      borderDash: [],
                      borderDashOffset: 0.0,
                      pointBackgroundColor: config.colors.primary,
                      pointBorderColor: 'rgba(255,255,255,0)',
                      pointHoverBackgroundColor: '#be55ed',
                      pointBorderWidth: 20,
                      pointHoverRadius: 4,
                      pointHoverBorderWidth: 15,
                      pointRadius: 4,
                      data: this.timelineData.spend
                    }
                  ]
                },
                extraOptions: chartConfigs.purpleChartOptions,
                gradientColors: config.colors.primaryGradient,
                gradientStops: [1, 0.4, 0]
              },
    }
},
//eslin-disable-next-line
props: ['timelineData'],
methods: {
    },
            created() {
    },
};
</script>

使用此代码，我在控制台日志中没有任何错误。但是，时间表显示如下。如果我随后更改代码，则在不刷新网站的情况下将显示数据。即我可以删除“ created（）{}”，时间线将显示如下：有人可以帮忙吗？现在已经很长一段时间无法解决此问题了！也许是在父组件中？

Vue Js：现在显示线图数据

0 个答案: