score:1
subclass pie, rewrite the initializer and adddata - in the initializer re-define draw, adding one line:
if(this.bg_img)ctx.fillstyle=ctx.createpattern(this.bg_img,"repeat");
, right after it says:
ctx.fillstyle = this.fillcolor;
(copy pie's draw, add that line - or just copy my altpie subclass from the bottom of the attached fiddle) this could be different for later versions but that's how chart.js 1.01 is.
also in your pie subclass you will add a property (for example call it bg_img) for sending the background image through. to do this there is a one-line addition, so re-define adddata inside altpie and add the property inside the splice line:
bg_img : segment.bg_img,
for example somewhere around the line
fillcolor : segment.color,
that's most of it - other than that you will load and then attach the images to the data you're making the chart with. to load them you can use
....img=new image();...img.src=...and - img.onload=function()(..recurse-load-next,
with a recursing callback similar to solution #2 from this page:
stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape
i think you would need to make sure the images are done loading before attaching them to the data and sending them through to the chart.js renderer, hence the recursion pattern to load them one by one before attaching them to the chart data and then creating the new altpie chart.
the end result is that your images will show up in the pie pieces backgrounds or you can still use a color background if there's no image. it changes the html5 canvas ink pattern
(ctx.fillstyle=ctx.createpattern(this.bg_img,"repeat"))
to be the image you attached to the chart data, also taken from solution #2 from the same page: stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape.
for the complete working example see attached fiddle https://jsfiddle.net/arlon_arriola/pkwftkp2/
the dependencies for loading the page are chart.js file (v1.01?) (which is just copy/pasted into the fiddle at the top making the code look extremely long but the relvant code is at the very bottom), and the images inside your ./imgs/patterns/ folder, and the reference to some hosted jquery (1.9?). (and a body tag)
i am sure you could get image rollovers too, just attach two images to the data, figure out where it re-draws for hovering and modify it the same way as the regular draw.
Source: stackoverflow.com
Related Query
- Chart.js Pie Chart: How to set background image for segment
- How set color family to pie chart in chart.js
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to set a full length background color for each bar in chartjs bar
- how to set chart.js grid color for line chart
- How do you set pie chart colors in angular-chart.js
- How to add background image in bar chart column in Chart.js?
- How to use set the color for each bar in a bar chart using chartjs?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to set X coordinate for each bar with react chart js 2?
- How do you set x and y axis and Title for a line chart using charts.js?
- How to put dynamic colors for pie chart - chart js
- How to assign different background colors to chart.js pie chart data set?
- How to set up a simple pie chart using React in ChartJS on codesandbox
- react-chartjs-2 how to set multiple background levels within a line chart
- How to set minimal value for bar chart in Chart.js? (ver. 2.0.2)
- How to create an array of objects dynamically in javascript for a pie chart
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- How to set specific height for chartJs background color in terms of yAxis value
- How to mapping variable data for pie chart (react.js)
- Set Chart Background Image - Chart.js
- How to have more controls over the borderColor per arc segment for chart.js pie charts
- How to set max and min value for Y axis
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart.js line chart set background color
- chartjs : how to set custom scale in bar chart
More Query from same tag
- Chartjs v2 stroke shadow
- Chart js - Get bar width after render
- How to just show x-axis (at y = 0) using chartkick (chart.js)?
- how to show bar graph on y axis in charjs
- How to dynamically set ChartJs line chart width based on dataset size?
- Pushing data from json to Chart.js labels and data
- Add dynamically function to Chart.js
- chart.js Hide empty Chart and keep previous data if no data? .net MVC
- How to create a charts in Razor Pages pulling data from the database?
- How to use chart.js script to draw multiple pie Charts
- How to show tooltips always on Chart.js 2
- Chart.js: Creating a Barchart with overlaying and offset Bars
- Chart js shows old data on mouse hover
- Count the duplicates in a string array using React JS
- Mixed chart scatter plot with chart.js
- Why this Tooltip callback for ChartJS works and this doesn't
- Chartkick-vue bar chart - "horizontalBar" is not a registered controller
- Click event of stacked line chart not working
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- Reproduce Error in Chartjs v2 Polar chart not plotting all supplied data
- How to get onClick Event for a Label in ChartJS and React?
- change date on x-axis dynamically
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
- Chart load time and animation slow on mobile device
- Chart.js - draw an arbitrary point with tooltip
- Completely hide empty bars in chart.js
- Chart.js V2: Add prefix or suffix to tooltip label
- chartjs mixed type display want to set display none for some bar
- HTML Input Form to a Javascript Variable
- How to pass a nested function to an HTML button and Dropdown menu