使用 HighCharts 和 Vue.js 绘制一个 json 图表

Question

我正在尝试绘制数据库中的一些数据。我正在关注this jsfiddle 的结构。然而，即使我设法从我的 API 中正确获取数据，图表也会显示，但没有绘制任何数据。

我的 app.js 看起来像这样：

// Load Sessions
var sessions = new Vue({
  el: '#sessions',
  delimiters: ["v{","}"],
  data: { date:'', sessions:'', json:'', timestamp:''},
  methods: {
    loadSessions: function(){
      var vm = this
      axios.get('/api/v1/metrics/')
           .then(function(response) {
             vm.json = response.data
             Highcharts.chart('container', {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: 'Session Over Time'
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                                'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        title: {
                            text: 'Sessions'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [{
                        type: 'area',
                        name: 'Sessions',
                        data: vm.json
                    }]
                });
           })
    }
  }
})

vm.json 文件如下所示：

[ { "date": "2017-01-02", "timestamp": 1483401600, "sessions": 1100 }, { "date": "2017-01-03", "timestamp": 1483488000, "sessions": 1159 }, { "date": "2017-01-04", "timestamp": 1483574400, "sessions": 1084 }]

我用一个简单的方法在我的 html 中加载 vue：

<div id='sessions'>
<a class="button is-primary" @click='loadSessions'>Load Sessions</a>

<!-- Just to test that data is loaded correctly from API -->
<ul style="margin-left: 20px;">
  <li v-for="item in json">
    <b>Date: </b> v{item.date} <br />
    <b>Sessions:</b> v{item.sessions} <br />
    <b>Timestamp:</b> v{item.timestamp}
  </li>
</ul>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</div>

现在我认为我的问题在于格式化 json，不是吗？ jsfiddle 示例中的 on 看起来有点不同。如何让我的数据显示出来？

Answer 1

您可以将数据转换为示例中显示的格式。

series: [{
  type: 'area',
  name: 'Sessions',
  data: vm.json.map(d => [new Date(d.date).getTime(), d.sessions])
}]

我将您的date 属性转换为Javascript Date 对象以便使用getTime，因为您的timestamp 属性（无论它来自何处）都不是正确的Javascript 时间戳。

Example.