1

我正在尝试使用 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>

密码笔

4

2 回答 2

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]
  }
 ]
于 2018-11-16T10:35:35.830 回答
0

问题的答案：

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

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

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

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

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

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

<img src="https://link-to-image" />在生成图例或工具提示时添加图像标签可以正常工作。

于 2018-11-18T00:59:55.410 回答