Передача вариантов реактивного графика Vue-Chartjs

Question

Таким образом, я следую за документом автора и делаю реактивную диаграмму так же, как образец документа.

Файл js и файл vue:

// the chart.js file
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}


// the chart.vue file
<template>
  <div style="background:#fff;">
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
import LineChart from './chart'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      datacollection: null
    }
  },
  mounted () {
    this.styling()
    this.fillData()
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
        gridLines: {
          display: false
        },
        datasets: [
          {
            label: 'Data One',
            fill: false,
            borderColor: 'red',
            backgroundColor: 'red',
            borderWidth: 1,
            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    styling () {
      this.Chart.defaults.global.elements.line.backgroundColor = '#1d3'
    },
    getRandomInt () {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

Проблема в следующем: кажется, что я не могу передать варианты вообще.

Что мне нужно сделать, это

1. Скрыть все линии сетки, включая x & y
2. Сделать подсказки всегда отображаемыми

Но я пытался всеми возможными способами, и ни один из них не работает, даже как:

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, {
      scales: {
        xAxes: [{
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
            display: false
          }
        }],
        yAxes: [{
          gridLines: {
            color: "rgba(0, 0, 0, 0)",
            display: false
          }
        }]
      }
    })
  }
}

Это не сработает, всплывающие подсказки такие же

Я просто хочу знать, могут ли реактивные vuechartjs передавать параметры? или мне просто нужно использовать chartjs?

Answer 1

Вы можете проверить демо на https://codepen.io/ittus/pen/MGQaNY

Чтобы подсказки всегда отображались, вы можете добавить

Chart.pluginService.register({
 beforeRender: function(chart) {
  if (chart.config.options.showAllTooltips) {
   chart.pluginTooltips = [];
   chart.config.data.datasets.forEach(function(dataset, i) {
    chart.getDatasetMeta(i).data.forEach(function(sector, j) {
     chart.pluginTooltips.push(new Chart.Tooltip({
      _chart: chart.chart,
      _chartInstance: chart,
      _data: chart.data,
      _options: chart.options.tooltips,
      _active: [sector]
     }, chart));
    });
   }); // turn off normal tooltips 
   chart.options.tooltips.enabled = false;
  }
 },
 afterDraw: function(chart, easing) {
  if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 
   if (!chart.allTooltipsOnce) {
    if (easing !== 1) return;
    chart.allTooltipsOnce = true;
   }
   chart.options.tooltips.enabled = true;
   Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
    tooltip.initialize();
    tooltip.update(); // we don't actually need this since we are not animating tooltips 
    tooltip.pivot();
    tooltip.transition(easing).draw();
   });
   chart.options.tooltips.enabled = false;
  }
 }
});

затем передать showAllTooltips: true в options