chart.js

问题 I am using Chart.js via Angular Char. I have displayed all the tooltips in order to download a chart with the information displayed by creating a plugin. The tooltips overlap, there doesn't seem to be any logic to distribute them so that they don't. Is there a way to do this? Some of the plugin code. This isn't important to my question. The 'beforeRender' function creates a new Chart.Tooltip for each item in the dataset and afterDraw renders them: // turn on tooltips chart.options.tooltips

问题 I'm drawing this pie chart: using this code: dxPieChart: { dataSource: dsAlarmsBySeverity, size: { width: 275, height: 150 }, palette: ['#FFFF00', '#FF9900', '#CC3300', '#33CC33', '#0066FF'], legend: { backgroundColor: '#FCFCFC', border: { color: 'black', width: .5, visible: true, cornerRadius: 10 }, verticalAlign: 'middle' }, series: [{ type: 'doughnut', argumentField: 'severity', valueField: 'count', label: { visible: false, font: { size: 16 }, connector: { visible: true, width: 0.5 },

问题 I just created Line Chart using chartjs library and I managed to make stroke in gradient color. Here is simple fiddle example what I did so far. What I need next, is to make pointColor to follow gradient stroke and to pick up the current color of it's position. Like on this photo. Any ideas how to achieve that? Thanks! 回答1: Update From @AndyHolmes question at Is it possible to add a drop shadow to chart.js line chart? The original solution (extending) is not required. All that is required is

问题 I am trying to add a double Y-axis in Chart.js for two dataset comparisons. I'm currently using Leigh Quince's LineBar extension which was the answer found here: Chart.js how to get Combined Bar and line charts? There is also a solution written about a year ago for double Y-axis but only for a Line charts, and its way out of sync with Nick's master. Seems there's either Line and Bar charts, or Double-Y but not both. My issue here is that I need to represent TSAT % (Saturation levels), left Y

问题 I'm starting new Angular application which I initialised with Angular-CLI (beta 22.1). But when I add test-data (5 values) to my chart it seems to scale wrong and only shows the first two values and streched them over the whole length of the graph (see picture). The project is otherwise blank and does not contain any CSS whatsoever. My app.component.html : <div> <canvas baseChart [datasets]="_numbers" [labels]="_labels" [options]="_chartOpt" [colors]="_chartColours" [legend]="_chartLegend"

问题 I'm using Chart.js to draw a chart.. My dataset have some null values, Actually chart.js plot a line between points that are previous and successor of the null values in this way : The red arrow indicate where are the null values I want to find how can I not plot these null values The configuration I use is as simple as that : var lineChartData = { "datasets": [{ "label": "defi score", "data": data, "pointStrokeColor": "#fff", "fillColor": "rgba(220,220,220,0.5)", "pointColor": "rgba(220,220

问题 I would like to add links to doughnut charts to be able to send the user for a page with the records filtered by the clicked option. For example here, if the user click on "Green", I want to send the user to a page that will show all "Green" records. I didn't find a easy way to do that, and tried something like this that isn't working yet: (I added a attribute "filter" with the "id" that I need to filter it) var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red",

问题 I have seen a lot of posts describing how you can use chart.js to create a graph using canvas and to then save the canvas to png, and import it into a pdf . This is fine but what if you want to bypass the on screen part and go straight to a pdf document and include the image? For example, I may have two buttons, one that opens the chart on screen using canvas . This page could then handle the chart saving and importing into the pdf without a problem. The other button opens the pdf directly.

问题 Consider a sequence of data along the following lines: data = [{angle:1.2,value:1.2},...,{angle:355.2: value:5.6}]; I'd like to display this data on a radially scaled plot (i.e. circular bands indicating how high the value of each point is) to show angle vs value. Angles will change by a small but uncontrollable quantity for each data set but there will always be ~50 of them spaced fairly evenly around the chart. It looks like chart.js has two options which don't quite fit the bill: A Radar

问题 How do you configure ChartJS version 2.0 to upon clicking on a point on a radar chart provide the data associated with that point i.e. label, data value, dataset name. I read on https://github.com/nnnick/Chart.js/releases that version 2.0 provides: New event hooks like onHover and onClick do the hard work for you. They pass you the good stuff without even having to locate via event Could someone please show me what I need to do I have read the documentation and tried attaching to the various