Wes*_*ey 5 javascript vue.js chart.js vuejs2
我想读取 json 文件并使用 VueJs 在 Chartjs 上绘制数据。
我能够显示一些数据,但不能显示 Json 文件中的数据。
到目前为止,我的 vue.app 看起来像这样:
export default {
name: 'app',
data () {
return {
labelschart: [],
datachart: [],
testLabels: ['10/01/2017 02:25:34', '11/01/2017 02:25:34', '12/01/2017 02:25:34', '13/01/2017 02:25:34', '14/01/2017 02:25:34'],
testData: [93.5, 93.4, 93.3, 93.4, 93.5]
Run Code Online (Sandbox Code Playgroud)
...
computed: {
lineData () {
return {
labels: this.testLabels,
datasets: [
{
label: 'Instrument',
backgroundColor: '#36A2EB',
data: this.testData,
fill: 'False',
borderColor: 'blue'
}
]
}
}
Run Code Online (Sandbox Code Playgroud)
我的 linechart.vue 是这样的:
<script>
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
</script>
Run Code Online (Sandbox Code Playgroud)
这是标签:
<line-chart class="card-content" :chartData="lineData" :options="options"></line-chart>
Run Code Online (Sandbox Code Playgroud)
如何从 json 文件填充标签图和数据图?
谢谢,
| 归档时间: |
|
| 查看次数: |
1072 次 |
| 最近记录: |