chart.js

问题 I am trying to show some data on the chart while using Yii2 . I have installed Yii2 Chart JS via the composer. Below is the code is taken from the documentation use practically\chartjs\Chart; Chart::widget([ 'type' => Chart::TYPE_BAR, 'datasets' => [ [ 'data' => [ 'Label 1' => 10, 'Label 2' => 20, 'Label 3' => 30 ] ] ] ]); Now when I refreshed this page I not seeing any chart. But in inspect->console I am getting an error Uncaught ReferenceError: Chart is not defined Update 1 Here is my

问题 I've been doing a lot of research but I wasn't able to figure out, how to enter percentage into labels badge like this image below. update: I'm using this laravel wrapper : https://github.com/ConsoleTVs/Charts so was the reason I didn't want to confuse viewers. I just want to know the name of the option.. my code is this: $perTopicChart = (new AnsweredPerTopic);//->percentageInnerCutout(70); $perTopicChart->options([ "events" => [], "legend" => [ "labels" => [ "defaultFontFamily" => "Tahoma",

问题 I've been doing a lot of research but I wasn't able to figure out, how to enter percentage into labels badge like this image below. update: I'm using this laravel wrapper : https://github.com/ConsoleTVs/Charts so was the reason I didn't want to confuse viewers. I just want to know the name of the option.. my code is this: $perTopicChart = (new AnsweredPerTopic);//->percentageInnerCutout(70); $perTopicChart->options([ "events" => [], "legend" => [ "labels" => [ "defaultFontFamily" => "Tahoma",

问题 I have been racking my brain on this for days now, starting to think its a bug in the chartJS package? When I setup a stacked bar chart, even with a pretty simple options config, I tend to get very slim transparent gaps between the bar data itself. The more data you have in the bar, the more apparent it becomes. I've isolated it completely out of my code (we're using React and react-chartjs-2 , but i=I've recreated it using vanilla ChartJS, latest version). In my example here, I've turned all

问题 I am using the chart.js to generate a chart. All works fine ! But how can I format the tooltip information? It should be: 28.04.2020 - 05:00 回答1: You need to define time.tooltipFormat for your xAxis . See Moment.js for the allowed format tokens. options: { ... scales: { xAxes: [{ type: 'time', time: { unit: 'hour', tooltipFormat: 'DD.MM.YYYY - HH:mm' } ... }] } ... } 来源： https://stackoverflow.com/questions/61474243/change-date-format-in-tooltip-of-chart-js

问题 Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth. 回答1: You can achieve this by setting point's radius property in configuration options as follows: var chartConfig = { type: 'line', options: { elements: { point:{ radius: 0 } } } } Tooltips for the points will also gone off. 回答2: You can set the pointRadius to zero. var myChart = new Chart( ctx, { type:

问题 I have a line chart with 4 datasets, I want to show different tooltip backgrounds for all 4 lines. but tooltip doesn't support dynamic background color, anyway how to do this? 回答1: Working "dynamic" example. ***keep in mind the access to data related to your data structure. Using tooltip-model https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-model "hello world" example - Change all tooltips background to red : tooltips: { custom: function(tooltipModel) { tooltipModel

问题 I have a line chart with 4 datasets, I want to show different tooltip backgrounds for all 4 lines. but tooltip doesn't support dynamic background color, anyway how to do this? 回答1: Working "dynamic" example. ***keep in mind the access to data related to your data structure. Using tooltip-model https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-model "hello world" example - Change all tooltips background to red : tooltips: { custom: function(tooltipModel) { tooltipModel

问题 I need to add images inside bar chart in chart.js. All available solutions deal with line chart points with pointStyle property. Couldn't find an example for Barcharts nor the official documentation offer solutions. I checked the plugins but couldn't find a solution their either. var imageExample = new Image(); cloud.src = 'imageurl.png'; Chart.pluginService.register({ afterUpdate: function (chart) { console.log(chart.config.data.datasets[0]); chart.config.data.datasets[0]._meta[0].data[0].

问题 I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks. The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page. How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up