Question

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

我很难使图例和工具提示按预期工作。当前，标签仅打印出标签数组，而工具提示则显示各个标签。

期望的标签图例：

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

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

如果要为每个数据点添加标签，则需要传递多个数据集。 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]
  }
 ]

Answer 2

回答问题：

如何获得带有此标签和颜色的图例？

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

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

在另一个图表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-chart.js

2 个答案: