Как получить исправленную легенду и всплывающую подсказку для динамически генерируемых данных vue-chartjs - PullRequest
Новая
       15

Как получить исправленную легенду и всплывающую подсказку для динамически генерируемых данных vue-chartjs

0 голосов
/ 13 ноября 2018

Я пытаюсь сгенерировать диаграмму vue с vuechartjs, число которых будет повторяться 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>

Codepen

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Ответы на вопросы:

  1. Как получить легенду с этим ярлыком и цветами?

Используя метод 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" /> при создании легенды или всплывающей подсказки работает нормально.

0 голосов
/ 16 ноября 2018

Хорошо, он распечатывает массив меток, потому что вы передаете для один набор данных несколько меток.

Если вы хотите метку для каждого элемента данных, вынеобходимо передать несколько наборов данных.Метки в большинстве диаграмм в 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]
  }
 ]
...