Как размещать легенды в единственной колонне графика торта и делать responsive?
У меня есть график торта в Chartjs, когда есть слишком много сегментов, создай 2 колонны и мне хотелось бы, что он сделал единственную колонну, и что он стал отвечающим совремнным требованиям, переделав график, если необходимо размещать scrollbar, так как он размещается, но я не нахожу, как размещение этого. Также redimensionar относительно разрешения, в котором загружается график.
Здесь код в jsfiddle (он имеет больше 30k букв и esSO он не позволяет это мне).
- Это на большом экране
- Если я это открываю на более маленьком экране, создаются 2 колонны
- И если я это открываю на еще более маленьком экране, не виден график легендами
Обновление 1: С помощью пользователя alcamalama ему удайтесь сделать следующее: ссылка, но мне не удается способствовать тому, чтобы в легендах он взял действие как взятие в Вашем нормальном состоянии (удалять сегменты торта и переделывать ее).
Проблема в моем Вебе состоит в том, что не размещаются цвета, и я не понимаю: Почему?.
6
задан Pablo Lozano
02.04.2019, 03:08
Ссылка
3 ответа
В тебе demo encontré следующие ошибки:
Снабжает ссылками в не определенное свойство : В l¦-nea
2021прослеживается, чтоvar ci = e.view.grafica_pie;, что вызывает, чтоciundefined.soluci¦n состоит в том, чтобы использовать просто глобальную переменную
grafica_pie;Индекс в несуществующее свойство : В l¦-nea
2023устанавливается, чтоvar curr = ci.data.datasets[0]._meta[0].data[index];, то, что, введя sub-grÃ: fico закончись ошибкой, ввиду того, что._meta[0]не всегда существует.soluci¦n состоит в том, чтобы использовать
Object.keysна._meta, чтобы получать договоренность со свойствами вышеупомянутого объекта и просить первую, а именно,Object.keys(grafica_pie.data.datasets[0]._meta)[0]Markup invÃ: lido : В линии
13изHTMLне хватало закрывать одинdiv.Asignaci¦n событий : В линии
2018, устанавливают$("#js-legend > ul > li")то, что вызывает, что, обновив menú легенд, оно не функционирует больше.soluci¦n состоит в том, чтобы использовать
Event delegation, а именно,$("#js-legend").on("click", 'ul > li',function(e){
Soluci¦n заверши ОБЩЕИЗВЕСТНЫЕ
: snippet внизу не является полным , переменная
datosбыла изменена, потому что она слишком длинная и тело ответа ограничено 30000 символами .
Soluci¦n:
let datos = [{
"id": 20,
"nombre": "Infusiones",
"id_padre": 0,
"menu": [{
"id": 188,
"nombre": "Te",
"precio": 5,
"id_padre": 20,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 189,
"nombre": "Anis",
"precio": 5,
"id_padre": 20,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 190,
"nombre": "Manzanila",
"precio": 5,
"id_padre": 20,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 191,
"nombre": "Hierba luisa",
"precio": 5,
"id_padre": 20,
"cantidad": "3",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 192,
"nombre": "Cafe americano",
"precio": 8,
"id_padre": 20,
"cantidad": "1",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 193,
"nombre": "Cafe capuccion",
"precio": 9,
"id_padre": 20,
"cantidad": "1",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 18,
"precio": 37,
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 28,
"nombre": "Tiraditos",
"id_padre": 0,
"menu": [{
"id": 83,
"nombre": "Tiradito de pescado",
"precio": 36,
"id_padre": 28,
"cantidad": "12",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 84,
"nombre": "Tiradito de Gallese a dos tiempos",
"precio": 38,
"id_padre": 28,
"cantidad": "7",
"promedio_ta": 0.86,
"promedio_tp": 0.86
},
{
"id": 85,
"nombre": "Tiradito mixto",
"precio": 38,
"id_padre": 28,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 24,
"precio": 112,
"promedio_ta": 0.86,
"promedio_tp": 0.86
},
{
"id": 54,
"nombre": "Recomendacion del Chef",
"id_padre": 0,
"menu": [{
"id": 315,
"nombre": "corvina",
"precio": 54,
"id_padre": 54,
"cantidad": "40",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 446,
"nombre": "Parihuela De Cabrilla",
"precio": 36,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 447,
"nombre": "Sudado de Cabrilla",
"precio": 36,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 448,
"nombre": "Cabrilla Frita",
"precio": 30,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 449,
"nombre": "Cabrilla A Lo Macho",
"precio": 36,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
}
],
"cantidad": 40,
"precio": 192,
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 44,
"nombre": "Criollo",
"id_padre": 0,
"menu": [{
"id": 117,
"nombre": "Lomo fino saltado",
"precio": 42,
"id_padre": 44,
"cantidad": "10",
"promedio_ta": 2.7,
"promedio_tp": 2.3
},
{
"id": 118,
"nombre": "Arroz chaufa de pollo",
"precio": 26,
"id_padre": 44,
"cantidad": "21",
"promedio_ta": 0.71,
"promedio_tp": 0.48
},
{
"id": 120,
"nombre": "Tacu tacu con lomo fino saltado",
"precio": 42,
"id_padre": 44,
"cantidad": "11",
"promedio_ta": 1.64,
"promedio_tp": 1.09
},
{
"id": 121,
"nombre": "Tacu tacu con pollo a la plancha",
"precio": 30,
"id_padre": 44,
"cantidad": "5",
"promedio_ta": 3.4,
"promedio_tp": 2.2
},
{
"id": 124,
"nombre": "Pollo a la plancha con papas fritas y ensalada",
"precio": 26,
"id_padre": 44,
"cantidad": "37",
"promedio_ta": 1.65,
"promedio_tp": 1.27
},
{
"id": 125,
"nombre": "Tacu tacu con pescado a la plancha",
"precio": 36,
"id_padre": 44,
"cantidad": "8",
"promedio_ta": 1.5,
"promedio_tp": 0.13
},
{
"id": 126,
"nombre": "Parrilla marina",
"precio": 48,
"id_padre": 44,
"cantidad": "2",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 127,
"nombre": "Brochetas de pescado",
"precio": 48,
"id_padre": 44,
"cantidad": "2",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 128,
"nombre": "Milanesa de pollo y/o pescado",
"precio": 36,
"id_padre": 44,
"cantidad": "6",
"promedio_ta": 5.33,
"promedio_tp": 3.83
},
{
"id": 864,
"nombre": "milanesa de pollo personal",
"precio": 36,
"id_padre": 44,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 865,
"nombre": "milanesa de pescado personal",
"precio": 36,
"id_padre": 44,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
}
],
"cantidad": 102,
"precio": 406,
"promedio_ta": 16.93,
"promedio_tp": 11.3
},
{
"id": 43,
"nombre": "Parihuelas",
"id_padre": 0,
"menu": [{
"id": 114,
"nombre": "parihuela de pescado mixto",
"precio": 34,
"id_padre": 43,
"cantidad": "69",
"promedio_ta": 1.49,
"promedio_tp": 0.65
},
{
"id": 115,
"nombre": "parihuela de chita",
"precio": 56,
"id_padre": 43,
"cantidad": "13",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 116,
"nombre": "Parihuela de tramboyo",
"precio": 46,
"id_padre": 43,
"cantidad": "19",
"promedio_ta": 1.89,
"promedio_tp": 1.11
},
{
"id": 868,
"nombre": "parihuela tramboyo natural",
"precio": 40,
"id_padre": 43,
"cantidad": "1",
"promedio_ta": 21,
"promedio_tp": 20
}
],
"cantidad": 102,
"precio": 176,
"promedio_ta": 24.38,
"promedio_tp": 21.76
},
{
"id": 46,
"nombre": "Guarniciones",
"id_padre": 0,
"menu": [{
"id": 134,
"nombre": "Arroz blanco",
"precio": 6,
"id_padre": 46,
"cantidad": "80",
"promedio_ta": 0.61,
"promedio_tp": 0.25
},
{
"id": 135,
"nombre": "Camote",
"precio": 6,
"id_padre": 46,
"cantidad": "18",
"promedio_ta": 0.17,
"promedio_tp": 0.11
},
{
"id": 136,
"nombre": "Cancha",
"precio": 6,
"id_padre": 46,
"cantidad": "8",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 137,
"nombre": "Chifle",
"precio": 6,
"id_padre": 46,
"cantidad": "7",
"promedio_ta": 0.29,
"promedio_tp": 0
},
{
"id": 138,
"nombre": "Yucas fritas",
"precio": 6,
"id_padre": 46,
"cantidad": "13",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 139,
"nombre": "Papas fritas",
"precio": 6,
"id_padre": 46,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 862,
"nombre": "yucas sancochadas",
"precio": 6,
"id_padre": 46,
"cantidad": "1",
"promedio_ta": 5,
"promedio_tp": 4
}
],
"cantidad": 131,
"precio": 42,
"promedio_ta": 6.07,
"promedio_tp": 4.36
},
{
"id": 45,
"nombre": "Platos Kids",
"id_padre": 0,
"menu": [{
"id": 129,
"nombre": "Chicharron de pescado kids",
"precio": 20,
"id_padre": 45,
"cantidad": "56",
"promedio_ta": 0.46,
"promedio_tp": 0.29
},
{
"id": 130,
"nombre": "Cebiche de pescado kids",
"precio": 20,
"id_padre": 45,
"cantidad": "53",
"promedio_ta": 0.64,
"promedio_tp": 0.42
},
{
"id": 131,
"nombre": "Chicharron de pollo kids",
"precio": 20,
"id_padre": 45,
"cantidad": "19",
"promedio_ta": 0.37,
"promedio_tp": 0.21
},
{
"id": 132,
"nombre": "Pechuga de pollo baby",
"precio": 20,
"id_padre": 45,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 133,
"nombre": "Milanesa de pollo kids",
"precio": 20,
"id_padre": 45,
"cantidad": "7",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 436,
"nombre": "Milanesa de pescado kids",
"precio": 20,
"id_padre": 45,
"cantidad": "10",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 21,
"nombre": "Nuestra Barra",
"id_padre": 45,
"menu": [{
"id": 194,
"nombre": "Pisco sour",
"precio": 18,
"id_padre": 21,
"cantidad": "44",
"promedio_ta": 0.09,
"promedio_tp": 0
},
{
"id": 196,
"nombre": "Maracuya sour",
"precio": 18,
"id_padre": 21,
"cantidad": "21",
"promedio_ta": 2.05,
"promedio_tp": 0
},
{
"id": 197,
"nombre": "Chilcano de pisco",
"precio": 18,
"id_padre": 21,
"cantidad": "13",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 198,
"nombre": "Machupicchu",
"precio": 18,
"id_padre": 21,
"cantidad": "11",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 199,
"nombre": "Chilcano de maracuya",
"precio": 18,
"id_padre": 21,
"cantidad": "13",
"promedio_ta": 0.15,
"promedio_tp": 0
},
{
"id": 200,
"nombre": "pina colada",
"precio": 18,
"id_padre": 21,
"cantidad": "6",
"promedio_ta": 1,
"promedio_tp": 0
},
{
"id": 201,
"nombre": "Mojito",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 202,
"nombre": "Cuba libre",
"precio": 18,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 203,
"nombre": "Daiquiri de durazno",
"precio": 18,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 204,
"nombre": "Algarrobina",
"precio": 18,
"id_padre": 21,
"cantidad": "8",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 205,
"nombre": "Amor en llamas",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 206,
"nombre": "Esmeralda",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 207,
"nombre": "Bon ami",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 208,
"nombre": "Peru libre",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 209,
"nombre": "Laguna azul",
"precio": 18,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 210,
"nombre": "Sangria especial",
"precio": 24,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 211,
"nombre": "Vino ocucaje jarra",
"precio": 24,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 316,
"nombre": "Happy hour 2 x 1",
"precio": 18,
"id_padre": 21,
"cantidad": "8",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 168,
"precio": 336,
"promedio_ta": 3.29,
"promedio_tp": 0
}
],
"cantidad": 150,
"precio": 120,
"promedio_ta": 1.47,
"promedio_tp": 0.92
},
{
"id": 23,
"nombre": "Pescados",
"id_padre": 0,
"menu": [{
"id": 61,
"nombre": "Pescado a la plancha",
"precio": 30,
"id_padre": 23,
"cantidad": "100",
"promedio_ta": 1.38,
"promedio_tp": 1.08
},
{
"id": 62,
"nombre": "Chita frita",
"precio": 52,
"id_padre": 23,
"cantidad": "18",
"promedio_ta": 0.94,
"promedio_tp": 0.67
},
{
"id": 63,
"nombre": "Pescado al ajo (filete)",
"precio": 32,
"id_padre": 23,
"cantidad": "20",
"promedio_ta": 0.7,
"promedio_tp": 0.6
},
{
"id": 86,
"nombre": "Pescado frito(Filete)",
"precio": 28,
"id_padre": 23,
"cantidad": "56",
"promedio_ta": 0.95,
"promedio_tp": 0.39
},
{
"id": 87,
"nombre": "Pescado a lo macho(filete)",
"precio": 36,
"id_padre": 23,
"cantidad": "11",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 88,
"nombre": "Chita a lo macho(500gr) o segun peso",
"precio": 56,
"id_padre": 23,
"cantidad": "6",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 89,
"nombre": "Chita al ajo",
"precio": 54,
"id_padre": 23,
"cantidad": "10",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 221,
"precio": 288,
"promedio_ta": 3.97,
"promedio_tp": 2.74
}
];
var graphColors = [];
var graphOutlines = [];
var hoverColor = [];
var internalDataLength = datos.length;
i = 0;
while (i <= internalDataLength) {
var randomR = Math.floor((Math.random() * 130) + 100);
var randomG = Math.floor((Math.random() * 130) + 100);
var randomB = Math.floor((Math.random() * 130) + 100);
var graphBackground = "rgb(" +
randomR + ", " +
randomG + ", " +
randomB + ")";
graphColors.push(graphBackground);
var graphOutline = "rgb(" +
(randomR - 80) + ", " +
(randomG - 80) + ", " +
(randomB - 80) + ")";
graphOutlines.push(graphOutline);
var hoverColors = "rgb(" +
(randomR + 25) + ", " +
(randomG + 25) + ", " +
(randomB + 25) + ")";
hoverColor.push(hoverColors);
i++;
};
let array_cantidad_ventas_pie = [];
let grafica_pie = null;
let array_padre_f = [];
var grafica_cantidad_ventas_pie = function(datos) {
//console.log('datos->',datos);
if ((datos['menu']) || (datos['menu'] != 'undefined')) {
datos = datos.sort(function(a, b) {
return parseFloat(a['cantidad']) - parseFloat(b['cantidad']);
});
let labels = [];
let data = [];
let datalabels = [];
$.each(datos, function(index, value) {
labels.push(value['nombre']);
data.push(value['cantidad']);
datalabels.push(value);
});
if (grafica_pie) {
grafica_pie.destroy();
}
let chart_cv = document.getElementById("chart_cant_ventas");
grafica_pie = new Chart(chart_cv, {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: "Population (millions)",
data: data,
datalabels: datalabels,
backgroundColor: graphColors,
hoverBackgroundColor: hoverColor,
borderColor: graphOutlines,
}]
},
options: {
responsive: false,
legend: false,
legendCallback: function(grafica_pie) {
var ul = document.createElement('ul');
ul.className = "pie-legend";
grafica_pie.data.labels.forEach(function(label, index) {
ul.innerHTML += "<li><span style='background-color: " + grafica_pie.data.datasets[0].backgroundColor[index] + "; border-color: " + grafica_pie.data.datasets[0].borderColor[index] + "; border-style: solid; border-width: 1px;'></span>" + label + "</li>"; // ^ ES6 Template String
});
return ul.outerHTML;
},
title: {
display: true,
text: 'Cantidad de ventas por producto',
},
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'mouseup'],
onClick: function(e, dataAtClick) {
if (dataAtClick != null && dataAtClick.length > 0) {
var index = dataAtClick[0]["_index"];
var objData = this.data.datasets[0].datalabels[index];
var e = e || window.event;
var btnCode;
if ('object' === typeof e) {
btnCode = e.button;
switch (btnCode) {
case 0:
if (objData['menu']) {
grafica_cantidad_ventas_pie(objData['menu']);
}
break;
case 1:
grafica_cantidad_ventas_pie(array_padre_f);
break;
case 2:
if (objData['id_padre'] !== 0) {
buscarPadres(array_cantidad_ventas_pie, objData['id_padre'], array_cantidad_ventas_pie);
grafica_cantidad_ventas_pie(array_padre_f);
}
break;
default:
grafica_cantidad_ventas_pie(array_padre_f);
}
}
}
}
}
});
document.getElementById('js-legend').innerHTML = grafica_pie.generateLegend();
}
}
function buscarPadres(array, id, array_padre) {
$.each(array, function(key, value) {
if (value['id'] == id) {
array_padre_f = array_padre;
return false;
} else {
if (value['menu']) {
buscarPadres(value['menu'], id, value['menu']);
}
}
});
}
array_cantidad_ventas_pie = datos;
grafica_cantidad_ventas_pie(array_cantidad_ventas_pie);
$("#js-legend").on("click", 'ul > li', function(e) {
var index = $(this).index();
$(this).toggleClass("strike");
var metas = Object.keys(grafica_pie.data.datasets[0]._meta);
var curr = grafica_pie.data.datasets[0]._meta[metas[0]].data[index];
curr.hidden = !curr.hidden
grafica_pie.update();
});.chart-legend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}
.chart-legend {
height: 250px;
overflow: auto;
}
.chart-legend li {
cursor: pointer;
}
.strike {
text-decoration: line-through !important;
}
.float-left {
float: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<section class="graficas">
<div class="float-left">
<div class="float-left" style="width:70%">
<canvas id="chart_cant_ventas" width="500" height="300" oncontextmenu="event.preventDefault();"></canvas>
</div>
<div class="float-left" style="width:30%">
<div id="js-legend" class="chart-legend"></div>
</div>
</div>
</section>13
ответ дан Marcos
19.11.2019, 21:21
Ссылка
Según объясняют в documentaci¦n Chart.js tamaño renderizaci¦n canvas , где он является grÃ: fica не возможно изменять посредством относительных признаков, из-за этого они показывают, что правильное состоит в том, чтобы вводить canvas в одном div, posici¦n которого и tamaño они были касающимися resoluci¦n экрана:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
В твоем случае я бросил беглый взгляд в c¦digo и продолжая эти инструкции - añadido один div содержа твой grÃ: fica, ademÃ: s я нуждался añadir в следующем l¦-nea c¦digo в выборах grÃ: fica: maintainAspectRatio: false
С этим soluci¦n показывает себе grÃ: fica всегда с тем же самым tamaño независимо от resoluci¦n экрана, из-за которого, если эта очень pequeña aparecerÃ: так вертикальный scroll как горизонтальный, не, если это serÃ: недостаток, но я не достиг то, что grÃ: fica уменьшите Ваш tamaño, не меняясь número колонн.
Соединение с c¦digo:
https://jsfiddle.net/93f6r2nc /
Ссылок:
https://www.chartjs.org/docs/latest/general/responsive.html
3
ответ дан alcamalama
19.11.2019, 21:21
Ссылка
-
1Спасибо за твой colaboració n, интересное знание это responsive, будь хорошо, осталось ясным это. Но я хочу легенды в единственной колонне с scroll, ú nico, что со мной случается, он состоит в том, чтобы размещать их в div, но не, как то, чтобы брать это событие. – Pablo Contreras 01.04.2019, 09:54
-
2Уже я понимаю, он думал, что ты referí схвати, чему всегда покажут в единственной колонне легенда независимо от tamañ или grá fica. Pensaré solució n, хотя это осложняет значительно вещи, так как легенда рисует сам canvas и не, если será возможный соглашаться на нее. – alcamalama 01.04.2019, 10:14
-
3Вопрос, очень сходный с твоей está решенная в этом соединении, если ты хочешь бросить беглый взгляд: stackoverflow.com/questions/43229626/… – alcamalama 01.04.2019, 10:36
-
4Мне не удается принести это в пример моего có я говорю, обновите мой вопрос. – Pablo Contreras 01.04.2019, 14:36
То, что ты можешь делать, состоит в том, чтобы использовать ее funciГіn legendCallback из chartJS, что он делает, состоит в том, чтобы создавать твои legends вводя html, костлявая, что ты можешь настраивать их в твой вкус и добавлять их css, преимущество этого состоит в том, что ты решаешь добавить, где твои legends, в случае моего примера, я поместил один div вместе с canvas внутри этого div, я ввел legends и оставил canvas только с нею grГЎfica.
AquГ - мой пример, взятый на основании твоего, я надеюсь, что то, в чем ты нуждаешься:
https://jsfiddle.net/vd3m8r6w/1 /
(Я ввел fiddle, из-за которого cГіdigo на изюме линии, позволенные в snipped).
3
ответ дан Ricardo Pérez
19.11.2019, 21:21
Ссылка
-
1¿ Как podrí чтобы поддерживать acció n легенды? Та, которая снимает один из сегментов, нажав на какую-либо из статей. – Pablo Contreras 01.04.2019, 13:49
-
2Сомнение относительно этого события click, когда ты нажимаешь на какую-то легенду, ты, должно быть, грузит дети этого отца? или что был бы должен делать? – Ricardo Pérez 01.04.2019, 15:01
-
3Нет, та же acció n легенды первоначального chartjs, удалять сегменты. – Pablo Contreras 01.04.2019, 16:00
-
4
+1(хороший ответ), но было бы хорошим, что, если бы ты разместил snippet, что такой, если к переменнойdatosты сводишь количество реестра, этой формы, ты сможешь размещать код, и он не остается во внешней ссылке, которая со временем может теряться. – Orlando De La Rosa 02.04.2019, 07:14spanвнутри? Я имею в виду пунктуально стиль.chart-legend li span– Marcos 03.04.2019, 08:21