FVANCOP / ChartNew.js

MIT License
420 stars 142 forks source link

transparent lines between chart pieces in pie chart #389

Closed omar-sedki closed 8 years ago

omar-sedki commented 8 years ago

when there are no segment in chart settings.still there transparent line width:1px between chart pieces here is a sample for the problem

http://charts.livegap.com/chart.php?user=omar.sedki&title=probleminChart_01&folder=/

FVANCOP commented 8 years ago

Hi Omar,

Unfortunately, I have no good news for you; I've tryed lot of things, but none gives a good solution. I have performed a similar test with Chart.js and I got the same very small lines. I thing that this is more a "bug" of the "arc" function : If you put two arcs next to each other (same center; end angle of the first arc = start angle of the second arc) you will always have this problem.

In your sample, if you set following options, those small lines will not appear, but the result is not really the same...

segmentShowStroke : true,
segmentStrokeColor : "#333",
segmentStrokeWidth :1,

Your Chart : probleminchart_01

The chart with the proposed options :

canvas

omar-sedki commented 8 years ago

canvas Hi Francois thanks for your fast reply. i try with add segment stroke(1.5 px) with the color of the segment when segmentShowStroke=false and it work for me. also please Donaugh chart not working with gradient colors.

Thanks Omar Sedki

omar-sedki commented 8 years ago

Here What I add

if (!config.segmentShowStroke) { ctx.lineWidth =1.5; ctx.strokeStyle =setOptionValue(1,"COLOR",ctx,data,statData,data[i].color,config.defaultFillColor,i,-1,{animationDecimal: animationDecimal, scaleAnimation : scaleAnimation} ); ctx.setLineDash([]); console.log(config); ctx.stroke();
ctx.setLineDash([]); }

FVANCOP commented 8 years ago

Hi Omar,

I've tryed your proposed code : you're right and it is a good solution but ... if you look carefully to the produced chart, you will see that the color on the border is displayed twice darker compared to the inside color. But I agree : it is better that what we got previously.

Unfortunately I could not merge the branch. I have reproduced a similar code. In the implemented code, you have to set option ' segmentShowStroke : "merge" ' instead of ' segmentShowStroke : false '. (if you set option segmentShowStroke : false you will get the same result as before the last change).

In the code, I have set "lineWidth" to 0 which is a non sense. But....... it works. I really think that there is a bug in the arc function. Perhaps that it will be solved in a future version of the browsers.

For the second related problem (gradientColor not working for Doughnut), I did not check a lot but there is a incompatibility between the code and the "http://charts.livegap.com/js/webfont.js" ; If found two bypass for this problem :

omar-sedki commented 8 years ago

Thanks alot Francois .i think segmentShowStroke : "merge" is a very good solution. For the second problem i think it from my site. Thanks alot