@jKEeY

Как вывести данные в stockChart?

Пытаюсь импортировать stockChart в компонент, как это показано в доке, но highchart не видит его
вот сам компонент Chart.js
/* eslint-disable camelcase */
import Highcharts from 'highcharts';
import VRadio from '@/components/RadioButton';
import exportingInit from "highcharts/modules/exporting";
import stockInit from 'highcharts/modules/stock';
exportingInit(Highcharts);
stockInit(Highcharts);

/**
 * Table component
 *
 * @param {array} data array with data for table
 */
export default {
  name: 'Chart',
  props: {
    data: {
      type: Array,
    },
  },
  components: {
    VRadio,
    Highcharts,
  },
  data() {
    return {
      chartOptions: null,
      master: null,
      selected: null,
      variants: null,
      dates: null,
      datailChart: null,
    };
  },
  methods: {
    getNormalArr() {
      const user_count = this.data.map(task => task.user_count);
      const group_count = this.data.map(task => task.group_count);
      const reply_count = this.data.map(task => task.reply_count);
      const likes = this.data.map(task => task.likes);
      const reposts = this.data.map(task => task.reposts);
      const comments = this.data.map(task => task.comments);
      this.dates = this.data.map(task => task.date);
      const views = this.data.map(task => task.views);
      const budget = this.data.map((task) => {
        // eslint-disable-next-line radix
        if (task.budget !== null) return parseInt(task.budget);
        return 0;
      });

      this.variants = [{
        id: '1',
        type: 'area',
        checked: true,
        name: 'Посты от пользователей',
        data: this.getDatesArr(user_count),
        color: '#244363',
      }, {
        id: '2',
        type: 'area',
        name: 'Посты от пабликов',
        data: this.getDatesArr(group_count),
        color: '#388E3C',
      }, {
        id: '3',
        type: 'area',
        name: 'Отправили в коменты',
        data: this.getDatesArr(reply_count),
        color: '#1b8dbb',
      }, {
        id: '4',
        type: 'area',
        name: 'Лайки',
        data: this.getDatesArr(likes),
        color: '#ef5c0e',
      }, {
        id: '5',
        type: 'area',
        name: 'Репосты',
        data: this.getDatesArr(reposts),
        color: '#c9302c',
      }, {
        id: '6',
        type: 'area',
        name: 'Комменты',
        data: this.getDatesArr(comments),
        color: '#ffbb61',
      }, {
        id: '7',
        type: 'area',
        name: 'Охват',
        data: this.getDatesArr(views),
        color: '#d09652',
      }, {
        id: '8',
        type: 'area',
        name: 'Бюджет',
        data: this.getDatesArr(budget),
      }];
      const series = [{
        id: '1',
        type: 'area',
        checked: true,
        name: 'Посты от пользователей',
        data: this.getDatesArr(user_count),
        color: '#244363',
      }];
      this.show(series.sort((a, b) => b.data[0] - a.data[0]));
    },
    getDatesArr(arr) {
      const ret = [];
      this.dates.forEach((date, i) => ret.push([date, arr[i]]));

      return ret;
    },
    changeOption(newSeries) {
      const series = [];
      series.push(newSeries);
      this.show(series.sort((a, b) => b.data[0] - a.data[0]), series[0].data);
    },
    show(series, data) {
      this.chartOptions = {
        chart: {
          type: 'area',
          reflow: false,
          borderWidth: 0,
          backgroundColor: null,
          marginLeft: 50,
          marginRight: 20,
        },
        title: {
          text: null,
        },
        xAxis: {
          showLastTickLabel: true,
          type: 'datetime',
          maxZoom: 14 * 24 * 3600000,
          plotBands: [{
            color: 'rgba(0, 0, 0, 0.2)',
          }],
          title: {
            text: null,
          },
        },
        yAxis: {
          gridLineWidth: 0,
          labels: {
            enabled: false,
          },
          title: {
            text: null,
          },
        },
        tooltip: {
          formatter() {
            return false;
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          series: {
            fillColor: {
              linearGradient: [0, 0, 0, 70],
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(255,255,255,0)'],
              ],
            },
            lineWidth: 1,
            marker: {
              enabled: false,
            },
            shadow: false,
            states: {
              hover: {
                lineWidth: 1,
              },
            },
            enableMouseTracking: false,
          },
        },

        series,

        exporting: {
          enabled: false,
        },

      };
    },
  },
  created() {
    this.getNormalArr();
  },
  watch: {
    data() {
      this.getNormalArr();
    },
  },
};

Но в консоли ошибка

Property or method "stockChart" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
от 90 000 до 220 000 руб.
Posh Space Москва
от 160 000 до 180 000 руб.