HighCharts Vue JS - ключ CSV

Question

Я использую csv-загрузчик из веб-пакета для загрузки моего 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

Я ожидаю увидеть полностью построенный график (диаграмму).

Answer 1

Попробуйте импортировать и инициализировать модуль data Highcharts следующим образом:

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

dataModule(Highcharts);