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