vue-google-charts绘制CandlestickChart蜡烛图无法正常渲染问题咨询

1. 核心错误：数据格式不符合Google CandlestickChart规范 #

你的代码中chartData存在两个强制规范问题，直接导致蜡烛图无法渲染：

• 缺少表头行：Google Charts要求第一行必须是列定义，明确每列的含义，否则会将第一行数据误判为列配置，导致后续数据类型不匹配
• 数值顺序错误：除第一列x轴标签外，后续四个数值必须严格按照 最低值、开盘值、收盘值、最高值 的顺序排列，顺序错误时蜡烛图会无法计算实体和影线范围，直接不渲染

2. 修正后完整代码 #

<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: [
        // 新增表头行，符合Google Charts数据格式要求
        ['交易日', '最低', '开盘', '收盘', '最高'],
        // 后续行的四个数值按 最低/开盘/收盘/最高 顺序排列，可根据你的实际业务调整数值顺序
        ['Mon', 20, 28, 38, 45],
        ['Tue', 31, 38, 55, 66],
        ['Wed', 50, 55, 77, 80],
        ['Thu', 50, 77, 66, 77],
        ['Fri', 15, 68, 22, 66]
      ],
      chartOptions: {
        legend:'none'
      }
    }
  }
}
</script>

额外说明 #

如果修正数据后仍然无法渲染，可检查vue-google-charts版本，v0.x版本部分迭代存在蜡烛图兼容问题，升级到v1.0及以上稳定版本即可解决。

内容的提问来源于stack exchange，提问作者Damien