0

我是一名学习vue的学生。我使用 Vue-chartjs 绘制了一个图表，我想在饼图上显示该值。但我不知道该怎么办。

请帮我...

当前情况（图像）：在此处输入图像描述

我的愿望（图片）：在此处输入图片描述

Vue.component('pie-chart', {
 extends : VueChartJs.Pie,
 props: ['data', 'options'],
 mounted(){
   this.renderPieChart();
 },
 computed: {
   attendanceData : function(){
     return this.data
   }
 },
 methods : {
   renderPieChart : function(){

     this.renderChart(
       {
         labels: ['a','b','c','d'],
         datasets: [{
             backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
             data: [10,20,30,40]
           }]
       },
       {
         responsive: true,
         maintainAspectRatio: false,
         pieceLabel: {
           render: 'value',
           precision: 1,
         }
       }
     )

   }
 },
 watch : {
      attendanceData : function(){
        this.$data._chart.destroy();
        this.renderPieChart();
      }
    }
  });
4

1 回答 1

0

正如Stackoverflow 关于 chart.js 工具提示的讨论，使用插件是一种解决方案。

然后正如Vue chart.js 指南所说，

在mounted() 中，用于this.addPlugin添加您的插件，如下例所示：

Vue.config.productionTip = false
//below plugin is copied from https://stackoverflow.com/a/37989832/5665870
let pluginConfig = {
    id: 'my-plugin',
  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
        // create an array of tooltips
        // we can't use the chart tooltip because there is only one tooltip per chart
        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;
        }

        // turn on tooltips
        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;
    }
  }
}

Vue.component('pie-chart', {
 extends : VueChartJs.Pie,
 props: ['data', 'options'],
 mounted(){
  this.addPlugin(pluginConfig);
   this.renderPieChart();
 },
 computed: {
   attendanceData : function(){
     return this.data
   }
 },
 methods : {
   renderPieChart : function(){
     this.renderChart(
       {
         labels: ['a','b','c','d'],
         datasets: [{
             backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
             data: [10,20,30,40]
           }]
       },
       {
         responsive: true,
         maintainAspectRatio: false,
         pieceLabel: {
           render: 'value',
           precision: 1
         },
         showAllTooltips: true
       }
     )

   }
 },
 watch : {
    attendanceData : function(){
      //this.$data._chart.destroy();
      //this.renderPieChart();
    }
  }
})
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
  <pie-chart></pie-chart>
</div>

于 2018-07-24T17:13:08.400 回答