chart.js2

问题 I have successfully got the information by onClick function. But is there any method i can get the point information on Hovering over the point. Right now onHover as mentioned in docs is not working to get the point. This is my jsFiddle. 回答1: In previous versions of Chart.js (for example 2.6) the onHover handler has to be configured as below: hover: { onHover: function(evt, item) { if (item.length) { console.log("onHover", item, evt.type); console.log(">data", item[0]._index, data.datasets[0]

问题 I am using below code to populate slice values in a pie chart using JS and it's correctly working but I am observing another problem as these values are getting populated only once and when I reload the charts it's getting disappeared. Now let's say if I close the browser and open again or change the browser it will show values again. But after doing multiple force refresh Ctrl + F5 then also it's not showing the values. Could you please help? Please note I am having more than 3 pie charts on

问题 I've been trying to add a vertical line that shows up with a tooltip when hovering over the chart. But I'm using chart.js 2.6 and the syntax from 1.x seems to be outdated. I've the following code working for 1.x var data = { labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], datasets: [{ data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1] }] }; var ctx = document.getElementById("LineWithLine").getContext("2d"); Chart.types.Line.extend({ name: "LineWithLine",

问题 I'm generating a pie chart with legend that looks like so: As you can perceive, the pie is pitifully puny. I prefer it to be twice as tall and twice as wide. Here is the code I am using: var formatter = new Intl.NumberFormat("en-US"); Chart.pluginService.register({ afterDatasetsDraw: function (chartInstance) { var ctx = chartInstance.chart.ctx; ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; ctx

问题 I've got a pie chart that looks like this when hovering over a piece of pie: Except for wanting the legend to the right instead of on top, I'm fairly content with this, but I want just the percentage value to display "all the time" in the pie pieces - and still have the <name> (<%val>): <data> displayed on hover. In other words, I want the pie to look something like this: How can I break that one piece of data out (the percentage) and draw that onto each piece of pie? Here is the code I'm

问题 I am rendering a chart inside an angular2 attribute directive (an approach taken by the angular2 team). This approach works with chart.js but not chart.js 2.x code for attribute directive is ... import {Directive, ElementRef, Input} from '@angular/core'; declare var Chart:any; @Directive({ selector: '[bargraph]' }) export class BarGraphDirective { el:any; myChart:any; constructor(element:ElementRef) { this.el = element.nativeElement; } ngAfterViewInit() { var canvas = this.el; var ctx =

问题 I created a doughnut chart using Chart.js 2.5. The issue I’m having is with the tooltip. When I hover over the chart, a tooltip is displayed with a caret that always stays in the left or right side, like this: I want to change the caret position so that it always show in the bottom. Is that possible? Here is my chart code var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ['Jan', 'Feb', 'Mar'], datasets: [{ label: 'dataset', data: [30, 50, 20], backgroundColor: [ 'rgb(153, 102,

问题 I created a doughnut chart using Chart.js 2.5. The issue I’m having is with the tooltip. When I hover over the chart, a tooltip is displayed with a caret that always stays in the left or right side, like this: I want to change the caret position so that it always show in the bottom. Is that possible? Here is my chart code var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ['Jan', 'Feb', 'Mar'], datasets: [{ label: 'dataset', data: [30, 50, 20], backgroundColor: [ 'rgb(153, 102,

问题 I am creating a bar chart like so: var ctxForecastChart = $("#forecastLineChart").get(0).getContext("2d"); var forecastChartData = { labels: [ "Total Sales" ], datasets: [ { label: "8/28/2016 - 9/3/2016", backgroundColor: "rgba(255,0,0,0.75)", hoverBackgroundColor: "rgba(255,0,0,1)", data: [240] }, { label: "9/25/2016 - 10/2/2016", backgroundColor: "rgba(255,153,0,0.75)", hoverBackgroundColor: "rgba(255,153,0,1)", data: [272] }, { label: "9/18/2016 - 9/24/2016", backgroundColor: "rgba(255,255

问题 I have been trying many ways to push the collection of array into the dataset. Anyone can help me to push an array into stacked chart based on the codepen below? Here's the example Codepen stacked bar Javascript const getData = ()=>new Array(7).fill('').map(v=>randomScalingFactor()); var barChartData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Dataset 1', backgroundColor: window.chartColors.red, data: getData() }, { label: 'Dataset 2',