时间戳

首页 > 解决方案 > 如何为动态生成的数据 vue-chartjs 获取固定的图例和工具提示

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

问题描述

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

我很难让图例和工具提示按预期工作。目前，标签只打印出标签数组，工具提示显示各自的标签。

预期的标签图例：

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

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

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>

密码笔

标签： vue.jsvuejs2chart.jsvue-chartjs

解决方案

好吧，它会打印出一组标签，因为您为一个数据集传递了多个标签。

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

然后定义一个带有标签的数据集。可以有多个数据点。例如，“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]
  }
 ]

推荐阅读