如何为动态生成的数据 vue-chartjs 获取固定图例和工具提示

Question

我正在尝试使用 vuechartjs 生成一个 vue 图表，该图表将在一段时间（年）内重复出现数字 10、20、30、40、50。

我很难让图例和工具提示像 expected.Currently 一样工作，标签只是打印出标签数组，工具提示显示相应的标签。

预期标签图例：

Label 1, Label 2, Label 3, Label 4, Label 5 各自的颜色：#F44336, #FC9900, #FCC106, #8BC34A, #4CAF50。

如何获得带有此标签和颜色的图例？
如何获得显示 label 和数据点而不是每个 labels 和数据点的工具提示？
如何将图像添加到工具提示/标签？

Vue.component('reactive', {
 extends: VueChartJs.Bar,
 mixins: [VueChartJs.mixins.reactiveProp],
 data: function () {
  return {
   options: {
    scales: {
     yAxes: [{
      ticks: {
       beginAtZero: true
      },
      gridLines: {
       display: true
      }
     }],
     xAxes: [{
      ticks: {
       beginAtZero: true
      },
      gridLines: {
       display: false
      }
     }]
    },
    legend: {
     display: true
    },
    tooltips: {
     enabled: true,
     mode: 'single',
     callbacks: {
      label: function(tooltipItems, data) {
       return '$' + tooltipItems.yLabel;
      }
     }
    },
    responsive: true,
    maintainAspectRatio: false,
    height: 200
   }
  }
 },
 mounted () {
  // this.chartData is created in the mixin
  this.renderChart(this.chartData, this.options)
 }
})

var vm = new Vue({ 
 el: '.app',
 data () {
  return {
     datacollection: null
    }
 },
 created () {
  this.fillData()
 },
 methods: {
  fillData () {
        this.datacollection = {
          labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
          datasets: [
            {
              label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'], 
              backgroundColor: this.getBackground(),
              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
    getRandomInt () {
   var myArray = [10,20,30,40,50]
   return myArray[Math.floor(Math.random()*myArray.length)];
         
      },
  getBackground() {
   return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
  },
  
 }
})

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>


<div class="app">
 <h1>Bar Chart</h1>
 <reactive :chart-data="datacollection"></reactive>
 <button class="button is-primary" @click="fillData()">Randomize</button>
</div>

Codepen

Answer 1

好吧，它会打印出一组标签，因为您传入了 one 数据集 multiple 标签。

如果你想为每个数据点一个标签，你需要传递多个数据集。在 chart.js 中的大多数图表中，标签定义了您的 X 轴。例如日期。

然后您定义一个带有标签的数据集。其中可以有多个数据点。例如，"Usage of Javascript"。在您的 data 数组中，您将获得 x 轴的匹配数据。如果您的标签具有三个值（jan、feb、ma），那么您的 datasets[0].data[] 也应该具有三个值。第一个匹配 "Jan"，第二个匹配 "Feb" 等

但这只是一个数据集。而且只有一个标签。所以传说中只有一个条目。如果你想要多个条目，你需要定义多个数据集。

labels: ['Jan', 'Feb', 'Mar'],
datasets: [
  {
   label: ['Usage of Javascript'], 
   backgroundColor: this.getBackground(),
   data: [10, 20, 22]
  },
  {
   label: ['Usage of PHP'], 
   backgroundColor: this.getBackground(),
   data: [16, 18, 20]
  }
 ]

Answer 2

问题的答案：

如何使用此标签和颜色获取图例？

通过在传递给图表的 options 对象中使用 legendCallback 方法

如何获得显示带有数据点的标签而不是带有数据点的每个标签的工具提示？

在另一个图表中 option 您可以在工具提示中定义您需要的内容：

  tooltips: {
      mode: 'single',
      callbacks: {
      label: function (tooltipItems) {
      return tooltipItems.yLabel // tooltipItems has other options which can be probed
            }
          },
        }

如何将图像添加到工具提示/标签？

在生成图例或工具提示时添加图像标签 <img src="https://link-to-image" /> 效果很好。

如何为动态生成的数据 vue-chartjs 获取固定图例和工具提示

How to get fixed legend and tooltip for dynamically generated data vue-chartjs

vue.js

vuejs2

chart.js

vue-chartjs