Chart.js - 원형 차트에 데이터 레이블 지시선을 표시합니다.

Question

Chart.Js로 많이 놀았지 만 시간 제약과 SVG 경로 D3의 개인적인 선호 때문에 Canvas에 들어 가지 않도록 최선을 다했습니다. et al.

대시 보드 페이지에 차트가 혼합되어 있으며 한 가지 문제점을 제외하고 모든 것이 환상적으로 보입니다. 원형 세그먼트를 마우스로 가리켜 기본 % 또는 값을 확인해야합니다. 대시 보드 뷰를 들어

, 내 사용자는 신속하게 세그먼트에 일부 데이터 레이블을 참조하는 것을 선호 - 엑셀과 마찬가지로 - 아마도 쉽게 이미지와 설명 :

https://support.office.com/en-gb/article/Display-or-hide-data-label-leader-lines-in-a-pie-chart-d7e7c62e-aaa5-483a-aa00-6d2c437df61b

기타의 문제를 여기에서 발견 한 솔루션은 단순히 세그먼트에 값을 표시하고 있지만 일부 세그먼트는 너무 작아 앞으로 나아갈 수 없기 때문입니다.

항상 툴팁을 표시하는 다른 솔루션도 있었지만 겹치는 부분이 많았고 일반적으로 상당히 끔찍한 것으로 보였습니다.

범례가 옆에 데이터를 표시 할 수 있다면 행복 하겠지만, 왜 더 많은 사람들이 동일한 기능을 요청하지 않았는지 이해할 수 없습니다. 제가 누락 된 것이 있습니까?

Answer 1

이 기능은 지금까지 사용할 수 없으므로 이에 대한 빠른 해결책은 없습니다.

Answer 2

실제로 전설에 데이터를 표시 할 수 있습니다 (직장에서 만든 대시 보드에 대해이 작업을 수행했습니다). 이를 달성하려면 generateLabelslegend label property을 사용해야합니다.

다음은 범례 내의 괄호 안에 데이터 값을 표시하는 예제입니다 (범례 항목 text에서 반환되는 속성입니다).

generateLabels: function(chart) { 
    var data = chart.data; 
    if (data.labels.length && data.datasets.length) { 
    return data.labels.map(function(label, i) { 
     var meta = chart.getDatasetMeta(0); 
     var ds = data.datasets[0]; 
     var arc = meta.data[i]; 
     var custom = arc.custom || {}; 
     var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault; 
     var arcOpts = chart.options.elements.arc; 
     var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); 
     var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); 
     var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); 

     return { 
     // here is where we are adding the data values to the legend title 
     text: label + " (" + ds.data[i].toLocaleString() + ")", 
     fillStyle: fill, 
     strokeStyle: stroke, 
     lineWidth: bw, 
     hidden: isNaN(ds.data[i]) || meta.data[i].hidden, 
     index: i // extra data used for toggling the correct item 
     }; 
    }); 
    } else { 
    return []; 
    } 
} 

codepen에서 실제로 볼 수 있습니다.