Hello,
I want to Legend of the small rectangular. I just put this code==>legend: { element: "chartLegend" } And run by <div>.This is my Chart:
And I wanted It was this:
Please give me suggest.
Thank you.Sulada
Hello Sulada,
This is due to how we are obtaining the color using getImageData. In my original sample, I just extracted the color from the topleft corner by doing getImageData(1, 1, 1, 1). This did not take into account if there was nothing drawn in the topleft corner.
So lets make a new assumption, every legend will contain a color within the center of the canvas. We will have to substitute the values we are passing to getImageData to search in the middle of the element we are looking at. The code will result in this:
getImageData($(".ui-chart-legend-item-badge > canvas")[i].width/2, $(".ui-chart-legend-item-badge > canvas")[i].height/2, 1, 1)
Where i corresponds to the current element we are iterating over. Now lets put in this new code within the for loop we are using to iterate over the canvas elements and extracting their color and pushing it to the colors array we are using to determine what color is used to fill in the newly drawn rectangular legend element:
for(var i = 0; i < $(".ui-chart-legend-item-badge > canvas").length; i++){ colors.push($(".ui-chart-legend-item-badge > canvas")[i].getContext("2d").getImageData($(".ui-chart-legend-item-badge > canvas")[i].width/2, $(".ui-chart-legend-item-badge > canvas")[i].height/2, 1, 1).data); //can replace for 8,7,1,1 for less general solution }
I am attaching the sample I used to test this behavior.
Hello Sam Babá,
Ok. I'll point out to you from your example.
From your sample code :
But what is must it be like this :
This is a problem that I found. I will also give Black square on the first picture and The orange line in the second image.
Can you provide more details on the changes you made to the code I provided? Can you give a brief overview of the code you provided?
Thank you for suggestion.
I bring to your code development. It works very well. But I have a problem with a legend is point that it can not be shown on the original.It is square and colorless. I try to fix it. And I think you might have a good idea that I would recommend.
code original:
code develop :
I upload file so that you can see code.
https://mega.nz/#!5xQ3WQJB!QSdRfps0XLaZ-Q-2WqzQmx3E2rD2l1ZPu_5tljzTed0
Please suggest me.
This behavior is currently not supported by our API but you can manually remove the legend markers provided by the chart and create your own rectangular legend.
I would begin by first getting the color of each legend item. Since the markers are all just canvas elements, you can extract the color by utilizing the getImageData function of the canvas context object returned by the canvas element.
We would need to iterate over the legend markers in the DOM and push the colors to an array. The code would look like this:
var colors = []; for(var i = 0; i < $(".ui-chart-legend-item-badge > canvas").length; i++){ colors.push($(".ui-chart-legend-item-badge > canvas")[i].getContext("2d").getImageData(1, 1, 1, 1).data); }
Now that we have the colors of each legend marker, we can remove the elements from the DOM:
$(".ui-chart-legend-item-badge").children().remove();
Now we have to create new canvas elements that we will draw rectangular legend markers utilizing the colors we extracted from our previous step. We would also assign a static height and width to the canvas object. I chose 16x16 but you can modify this to be smaller or larger as you see fit. The code would look like this:
for(var i = 0; i < $(".ui-chart-legend-item-badge").length; i++){ document.getElementsByClassName("ui-chart-legend-item-badge")[i].appendChild(document.createElement("canvas")); $(".ui-chart-legend-item-badge > canvas")[i].height = 16 $(".ui-chart-legend-item-badge > canvas")[i].width = 16 var ctx = $(".ui-chart-legend-item-badge > canvas")[i].getContext("2d"); ctx.fillStyle = "rgb("+colors[i][0]+", "+colors[i][1]+","+colors[i][2]+")"; ctx.fillRect(0, 0, $(".ui-chart-legend-item-badge > canvas")[i].height , $(".ui-chart-legend-item-badge > canvas")[i].width); }
And now we have our legend markers as rectangles!
To finalize, here's some recommended reading for dealing with the canvas element:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
Here's some good reading regarding DOM traversal:
https://api.jquery.com/category/traversing/
I'm also attaching a sample that I used to test this behavior.
Let me know if I can be of further assistance.