Javascript 用HighCharts&；绘制json图表；Vue.js

我正试图绘制数据库中的一些数据。我正在关注结构。然而，尽管我成功地从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
                    }]
                });
           })
    }
  }
})

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

vm.json

文件如下所示：

// 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
                    }]
                });
           })
    }
  }
})

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

我用一个简单的

<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>

加载会话


日期：v{item.Date}

会话：v{item.Sessions}

时间戳：v{item.Timestamp}

---

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

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

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

我将您的

date

属性转换为Javascript日期对象，以便使用

getTime

，因为您的

timestamp

属性（无论从何而来）不是正确的Javascript时间戳

---

.

嗨，我试过你的设置，但有些东西似乎不起作用。如果我在

vm.json=response.data

下添加

vm.nex=vm.json.map（d=>[new Date（d.Date.getTime（），d.sessions]）

，然后在我的模板中添加

v{nex}

，则不会加载任何内容，也不会加载图表。你知道为什么吗？@Costantin确实有

response.data

实际上有任何数据吗？是的，因为当我用

v{json}

呈现

vm.json=response.data

时，我得到以下信息：

[{“日期”：“2017-01-06”，“时间戳”：1483747200，“会话”：1180}，{“日期”：“2017-01-08”，“时间戳”：1483920000，“会话”：966}，{“日期”：“2017-01-09”，“timestamp”：1484006400，“sessions”：1203}等

@Costantin是否存在控制台错误？是否有

响应。数据

包含字符串或实际数组？是的，现在我已经检查了，我得到了此错误：

[Vue warn]：属性或方法“nex”“未在实例上定义，但在呈现过程中引用。请确保在数据选项中声明被动数据属性。（在中找到）