Vue-google-K线图问题

Question

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

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

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

Vue-google-K线图问题

Vue-google-charts issue with candlesticks

charts

google-visualization

vue.js