chart.js

问题 I want to change the tooltip of a Chart I made in Yii2 using dosamigos\chartjs\ChartJs which is based on Chart.js My problem comes when I try to modify the Tooltip part of the chart. I am unable to achieve it. I have tried using multiTooltipTemplate, tooltips.callback and tooltipTemplate properties but I have not succeeded yet. Below are 2 pictures of my Chart, What I want to achive is this: The ToolTip of the inner chart (first image) should say something like this: "A: 119 Products" or "B:

问题 With Chart.js, is it possible to create a HiLo chart like this? Optionally with custom points like arrows. 来源： https://stackoverflow.com/questions/46526949/chart-js-hilo-chart-example

问题 I've delayed animation of a Chart.js canvas until it's brought into the viewport, but am struggling to limit this to only one animation. I'd greatly appreciate any input on this. Here's the code: var inView = false; function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)); } $

问题 In the chartjs document, you can use update() method to redraw bar the value change, but not the bar label change, or bar order change. What I want to do is to sort the bar order by label after new bar is added to chart by myBarChart.addData(). Here is my attempt to solve the problem which fails: this.myBarChart.addData([1], tickString); // TODO: need to sort here by tick string when adding new one! this.myBarChart.datasets[0].bars = _.sortBy(bars, function(bar){ return parseFloat(bar.label);

问题 I'm working with chart.js v2 and I am trying simulate the hover state of a segment on a doughnut graph when the chart loads so it appears there is a section alright highlighted. I've been searching and combing the code for a day now and can't figure out a good way to do this. Thanks in advance! 回答1: Setting a segment's hover style is a bit confusing because its not really documented anywhere. Nevertheless, I was able to figure it out a while back when I wanted to highlight a segment when it's

问题 I'm using Chart.js and I can't seem to insert a line break into the tool tip text. I've tried \n, but that doesn't seem to work for me. How else should I go about doing this? 回答1: Chart.js uses canvas fillText for the tooltips in it's default tooltip function. fillText unfortunately doesn't support word wrapping. So you'll have to write your own custom tooltip function. There again, the labels are also used for the x axis. The easiest way would be to use \b (it's just ignored in your axis

问题 I'm still fairly new to javascript and this has got me banging my head against the wall. I'm sure it's really simple but for some reason I cannot seem to get this working correctly. I have seen similar questions on stackoverflow but I can't make them work for me. I am trying to plot an unknown number of datasets onto a Chartjs graph. I am able to get the data (using PHP it is output as data attributes on child elements of the canvas) and store them to a variable $rows. var $rows = $('

问题 I'm trying to make an app to graph tide data using vue.js and chart.js. I get my data from the Wunderground API using axios, format it for chart.js, then pass it using props to a component to graph it. However, when I initially load the page, a blank chart loads. Upon resizing the window, or toggling the dataset the data appears properly. I've read Chart.js will not render using vue.js until window resizes, which describes a similar problem, but unlike in that question, my canvas renders

问题 I'm displaying a stacked bar chart on my page. When I initialize the table, I sort the data so that it is displayed in descending order by total in each dataset. To do this, I'm using a custom plugin Chart.plugins.register({ datasets: [], getData(labels, datasets) { const sum = []; for (i = 0; i < datasets[0].length; i++) { sum.push({ label: labels[i], data: datasets.map(e => e[i]), get sum() { // ES6 - getter return this.data.reduce((a, b) => a + b); } }); } return sum; }, beforeInit(chart)

问题 I have a chart that has multiple lines, each of which is plotted on it's own y-axis. I have been trying to set it up so that when a line is hidden via the legend the axis it is on is hidden as well. My plan is to add a click listener to the canvas and from there disable or enable all axis depending on the line state. My issue is determining if the line is hidden or not. The dataset.hidden property only seem to be relevant if the hidden value in the dataset._meta is undefined. I tried to set