Question

我正在使用webpack中的csv-loader加载CSV文件，并且可以在我的Vue JS应用上正常加载。

已填充data.csv项，但未显示该图表。应用正在本地提供。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
import {Chart} from 'highcharts-vue'
import csvPath from './assets/test.csv'
import Papa from 'papaparse'

export default {
  name: 'app',
  components: {
    highcharts: Chart
  },

  data () {
    return {
      chartOptions: {
        chart: {
          type: 'column'
        },
        data: {
          csv: csvPath
        },
        title: {
          text: 'Fruit Consumption'
        },
        yAxis: {
          title: {
              text: 'Units'
          }
        }
      }
    }
  },

CSV文件

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5

我希望看到完整绘制的图形（barchart）。

Answer 1

尝试像这样导入和初始化data Highcharts模块：

import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";

dataModule(Highcharts);

HighCharts Vue JS-CSV密钥

1 个答案: