Я пытаюсь отобразить график из Highcharts в Vue. js с Highcharts для Vue. Я продолжаю получать ошибку в заголовке на консоли браузера для созданного мной наблюдателя и методов (см. Код ниже). Как и для других методов Vue (см. Снимок экрана под кодом).
Наблюдатель запускает метод dataSource (). Метод dataSource () используется для чтения списка и вычисления данных диаграммы; Константа «база» - это то, откуда будут извлекаться категории и данные. Метод setup () используется для настройки диаграммы и отображения ее на экране (этот метод будет запущен только тогда, когда данные будут готовы).
Как мне решить эти ошибки?
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
import { mapState } from "vuex";
import _ from "lodash";
import { Highcharts } from "highcharts";
export default {
computed: mapState({
list: state => state.list
}),
//watcher for each time the list is modified. Triggers dataSource() method;
watch: {
list() {
this.dataSource();
}
},
methods: {
//used to read the list and calculate chart data
dataSource() {
const countries = this.list.map(item => item.country);
//const from where categories and data is going to be extracted
const base = _(countries)
.countBy()
.map((value, key) => ({ key, value }))
.orderBy(["value"], ["desc"])
.value();
const categories = base.map(item => item.key);
const values = base.map(item => item.value);
this.setup({ categories, values });
},
//used to set up the chart and display on the screen. This method will only be triggered when data is ready
setup(obj) {
const { categories, values } = obj;
Highcharts.chart("container-for-countries", {
chart: {
type: "column"
},
title: {
text: "Monthly Average Rainfall"
},
subtitle: {
text: "Source: WorldClimate.com"
},
xAxis: {
categories: categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: "Rainfall (mm)"
}
},
series: [
{
name: "Quantidade",
data: values
}
]
});
}
}
};
</script>
