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
          }
        }]
      }
    })
  }
}

不行，tooltips是一样的

我只是想知道，反应式 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