Пользовательские ярлыки с Chart.js

Question

Просмотрев advanced tooltips и legend configuration для chart.js, я не уверен, как добиться следующего стиля ярлыков для моих диаграмм.

Как я могу выход мои номера для каждой секции этой кольцевой диаграммы и соединить эти цифры для каждого сегмента графика?

Если это невозможно с Chart.js, то может ли кто-нибудь указать мне на библиотеку диаграмм, которая позволит мне это сделать?

new Chart(document.querySelector('#chart'), { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: [ 
 
      'Red', 
 
      'Blue', 
 
      'Yellow' 
 
     ], 
 
     datasets: [{ 
 
      data: [300, 50, 100], 
 
      backgroundColor: [ 
 
       '#FF6384', 
 
       '#36A2EB', 
 
       '#FFCE56' 
 
      ], 
 
      hoverBackgroundColor: [ 
 
       '#FF6384', 
 
       '#36A2EB', 
 
       '#FFCE56' 
 
      ] 
 
     }] 
 
    }, 
 
    options: { 
 
     legend: { 
 
      display: false 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> 
 

 
<canvas id="chart" width="400" height="400"/>

Answer 1

Я считаю, что chartjs трудно работать (но это хорошо, в крайнем случае). Вы можете попробовать D3, который очень настраиваемый. Он создает диаграммы с использованием svgs вместо холста, поэтому элементам легче получить доступ и работать с ними.

Вот код, но он не будет работать на месте, поскольку для предотвращения ошибок COR требуется внешний файл CSV с данными и веб-сервер. Вот CSV для ваших данных (data.csv):

percentage_label,percentage 
19,19 
10,10 
32,32 
39,39 

var width = 960, 
 
    height = 500, 
 
    radius = Math.min(width, height)/2; 
 

 
var color = d3.scale.ordinal() 
 
    .range(["#fdb92e", "#c02f8e", "#1aaaa9", "#ffffff"]); 
 

 
var arc = d3.svg.arc() 
 
    .outerRadius(radius - 70) 
 
    .innerRadius(radius - 180); 
 

 
var pie = d3.layout.pie() 
 
    .sort(null) 
 
    .value(function(d) { return d.population; }); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
d3.csv("data.csv", type, function(error, data) { 
 
    if (error) throw error; 
 

 
    var g = svg.selectAll(".arc") 
 
     .data(pie(data)) 
 
    .enter().append("g") 
 
     .attr("class", "arc"); 
 

 
    g.append("path") 
 
     .attr("d", arc) 
 
     .style("fill", function(d) { return color(d.data.percentage_label); }) 
 
     .style("stroke-width","0px"); 
 

 
    g.append("text") 
 
     .attr("transform", function(d) { 
 
    return "translate(" + ((radius + 30) * Math.sin(((d.endAngle - d.startAngle)/2) + d.startAngle)) + ", " + (-1 * (radius - 10) * Math.cos(((d.endAngle - d.startAngle)/2) + d.startAngle)) +")";}) 
 
     .attr("dy", ".5em") 
 
     .style("fill","#ffffff") 
 
     .style("font-size","40px") 
 
     .text(function(d) { return (d.data.percentage_label + "%"); }); 
 
     
 
    g.append("circle") 
 
     .attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")";}) 
 
     .attr("r", 5) 
 
     .style("fill","#ffffff"); 
 
    g.append("circle") 
 
     .attr("transform", function(d) {return "translate(" + ((radius - 20) * Math.sin(((d.endAngle - d.startAngle)/2) + d.startAngle)) + ", " + (-1 * (radius - 50) * Math.cos(((d.endAngle - d.startAngle)/2) + d.startAngle)) +")";}) 
 
     .attr("r", 5) 
 
     .style("fill","#ffffff"); 
 
     
 
     function lineCoordinates(d,x) { 
 
      /* x: coordinate to return */ 
 
      //not the most efficient method 
 
      var pa = []; 
 
      var p1 = arc.centroid(d); 
 
      pa.push(p1[0]); 
 
      pa.push(p1[1]); 
 
      pa.push((radius - 20) * Math.sin(((d.endAngle - d.startAngle)/2) + d.startAngle)); 
 
      pa.push(-1 * (radius - 50) * Math.cos(((d.endAngle - d.startAngle)/2) + d.startAngle)); 
 
      return pa[x]; 
 
     } 
 
    g.append("line") 
 
     .style("stroke","white") 
 
     .style("stroke-width","2px") 
 
     .attr("x1",function(d) { return lineCoordinates(d,0);}) 
 
     .attr("y1", function(d) { return lineCoordinates(d,1);}) 
 
     .attr("x2", function(d) { return lineCoordinates(d,2);}) 
 
     .attr("y2", function(d) { return lineCoordinates(d,3);}); 
 
}); 
 

 

 
function type(d) { 
 
    d.population = +d.percentage_label; 
 
    return d; 
 
}

body { 
 
    background-color: #F68135; 
 
} 
 

 
.arc text { 
 
    font: 10px sans-serif; 
 
    text-anchor: middle; 
 
} 
 

 
.arc path { 
 
    stroke: #fff; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Мой результат довольно близко:

Вот модификации, которые я сделал в базовая диаграмма пончиков D3 (на основе этого примера: https://bl.ocks.org/mbostock/3887193):

• изменился внутренний и из радиусов (радиусы?)
• изменения цвета (это scale.ordinal часть)
• добавлены стилей для этикеток
• перемещаемой этикетка из центров сегментов (так как есть некоторая дуга математики участвует, это было полезно: Label outside arc (Pie chart) d3.js)
• добавил пару кругов на концах выноски линий
• добавлены строки для выноски
• добавил небольшую функцию (lineCoordinates), чтобы сделать математику позиционирования немного легче иметь дело с

Я уверен, что все это можно было бы подрезать и сделать немного более эффективным. Я также рекомендовал бы сделать цвета сегментов отличными от цветов ярлыка/выноски (то, что один callout get потерян на последнем сегменте).

У меня нет одинакового шрифта ярлыка, но поскольку это выполняется с помощью SVG, вы можете легко изменить шрифт со стилями. Это не относится к Chartjs (я столкнулся с той же проблемой, когда попытался изменить стили ярлыков в Chartjs).

D3 имеет более крутую кривую обучения, чем Chartjs, но как только вы ее повесите, вы можете сделать практически все, что связано с этим графиком.Официальный сайт здесь https://d3js.org/