Opened 9 years ago

Closed 9 years ago

#11425 closed enhancement (fixed)

[patch][ccla]Pie Chart 2D: labels overlapped issue

Reported by: ruanqi Owned by: Eugene Lazutkin
Priority: high Milestone: 1.6
Component: Charting Version: 1.5.0b2
Keywords: pie chart label Cc: Adam Peller, deanw@…, rqruanqi@…
Blocked By: Blocking:

Description

Pie labels would overlapped when there is many slices in pie chart, hard to tell which slice that label belongs to. this pie chart enhencement provide a new label style called "columns", and re-caculate the label position.

var pieChart = new dc.Chart2D("pieChart");
pieChart.setTheme(dc.themes.MiamiNice).addPlot("default", {
    type: "Pie",
    font: "normal normal 10pt Tahoma",
    fontColor: "black",
    radius: 100,
    labelStyle: "columns",
    htmlLabels: true
})

demo link: http://dleadt.torolab.ibm.com/dl/dojodemos/rock/pie_smart_label.html

Attachments (4)

dojox-pie-labels.patch (14.0 KB) - added by Adam Peller 9 years ago.
updated patch from Qi Ruan (IBM)
pie_smart_label.html (4.2 KB) - added by dotcom2 9 years ago.
pie_smart_label.2.html (4.2 KB) - added by dotcom2 9 years ago.
test_piesmall.html (1.9 KB) - added by dotcom2 9 years ago.

Download all attachments as: .zip

Change History (10)

comment:1 Changed 9 years ago by Eugene Lazutkin

Your demo link doesn't work outside of IBM.

Changed 9 years ago by Adam Peller

Attachment: dojox-pie-labels.patch added

updated patch from Qi Ruan (IBM)

comment:2 Changed 9 years ago by Adam Peller

Cc: Adam Peller added; apeller@… removed

Update from Rock: using "labelWiring" to define the stoke style of label connection line.

  1. add "labelWiring" in defaultTheme.series of Theme.js
  2. add "labelWiring" in optionalParams of Pie.js
  3. add random data testing in test_pie_smart_label.html

Changed 9 years ago by dotcom2

Attachment: pie_smart_label.html added

Changed 9 years ago by dotcom2

Attachment: pie_smart_label.2.html added

comment:3 Changed 9 years ago by dotcom2

I tried to apply the patch in my dojo_1-5-0_20100902 build, and tested using my test program test_piesmall.html.

I declares

var chart10 = new dc.Chart2D("test10");

chart10.addPlot("default", { type: "Pie", font: "normal normal 11pt Tahoma", fontColor: "black", labelWiring: "#ccc", labelStyle: "columns", htmlLabels: true, startAngle: -10, radius: 80

});

and defines three small slices:

{y: 0.05, text: "Green", color: "green", stroke: "black"}, {y: 0.05, text: "Red", color: "Red", stroke: "black"}, {y: 0.05, text: "Blue", color: "Blue", stroke: "black"},

I expect to see labels "Green", "Red", "Blue" for each of these small slices but the result I see is those three labels are still overlapped, cannot see the label text clearly.

I think the length of the "labelwire" should be flexible so that the labels can be displayed at different places, but the actual result shows the length of "labelwires" are all same, it made teh label overlapping if the pie slices are small.

The patch does not seem totally solved the problem.

Changed 9 years ago by dotcom2

Attachment: test_piesmall.html added

comment:4 Changed 9 years ago by Eugene Lazutkin

Milestone: tbd1.6

comment:5 in reply to:  3 Changed 9 years ago by Eugene Lazutkin

Status: newassigned

Replying to dotcom2:

I cannot reproduce it using test_piesmall.html. If you have more details, or different tests, please file a separate bug.

comment:6 Changed 9 years ago by Eugene Lazutkin

Resolution: fixed
Status: assignedclosed

(In [23506]) Charting: fan-style pie chart labels, thx Qi Ruan (CCLA, IBM)!, !strict, fixes #11425.

Note: See TracTickets for help on using tickets.