vue.js - 烛台的 Vue-google-charts 问题

Question

我正在尝试使用 vue.js 和 vue-google-charts 绘制烛台图。我所做的适用于其他图表（折线、柱形、饼图...），但不适用于烛台。下面的代码有什么问题？

<template>
  <GChart
      type="CandlestickChart"
      :settings="chartsLib"
      :data="chartData"
      :options="chartOptions"
  />
</template>

<script>
import { GChart } from 'vue-google-charts'
export default {
  components: {
    GChart
  },
  data () {
    return {
      chartsLib: {packages: ['corechart']},
      chartData: [
        ['Mon', 20, 28, 38, 45],
        ['Tue', 31, 38, 55, 66],
        ['Wed', 50, 55, 77, 80],
        ['Thu', 77, 77, 66, 50],
        ['Fri', 68, 66, 22, 15]
      ],
      chartOptions: {
        legend:'none'
      }
    }
  }
}
</script>

标签： vue.jschartsgoogle-visualization

Answer 1

提供数据时，您需要包含列标题...

  chartData: [
    ["x", "Low", "Close", "Open", "High"],  // <-- column headings
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ],