#angular #chart.js #ng2-charts
Вопрос:
Я пытаюсь создать диаграмму пончиков с помощью ng2-диаграмм, в которой есть две серии, показывающие что-то похожее на массив, найденный ниже. Я могу получить две серии для визуализации, если количество элементов в массиве данных равно количеству меток. Но я не могу создать серию с внешним кольцом, показывающим 3 числа, и внутренним кольцом, имеющим 6 чисел и разные метки. У кого-нибудь еще есть опыт работы с этим?
public summaryDataSets = [
{
labels: ['parent1', 'parent2', 'parent3'],
data: [34, 50, 26]
},
{
labels: ['child1_1', 'child1_2', 'child2_1', 'child2_2', 'child3_1', 'child3_2'],
data: [14, 20, 30, 20, 10, 16]
}
]
Ответ №1:
Для этого можно использовать обозначения объектов вместе с пользовательским обратным вызовом метки всплывающей подсказки:
var options = {
type: 'doughnut',
data: {
datasets: [{
label: '# of Votes',
data: [{
id: 'parent1',
key: 55
}, {
id: 'parent2',
key: 55
}, {
id: 'parent3',
key: 30
}],
borderWidth: 1,
},
{
label: '# of Points',
data: [{
id: 'child1',
key: 55
}, {
id: 'child2',
key: 55
}, {
id: 'child3',
key: 30
}, {
id: 'child4',
key: 55
}, {
id: 'child5',
key: 55
}, {
id: 'child6',
key: 30
}],
borderWidth: 1
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (`${ttItem.raw.id}: ${ttItem.raw.key}`)
}
}
},
parsing: {
key: 'key'
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); <body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body> Комментарии:
1. Это выглядит возможным, мне нужно будет выяснить, как использовать его с ng2-диаграммами. Спасибо за помощь, я дам вам знать, как все обернется.
2. MB забыл эту часть, вам нужно будет установить
nextветвь ng2charts и использовать по крайней мере v3.6 из chart.js чтобы использовать это3. Поэтому я обновил свой chart.js и пакеты ng2-графиков и полностью все сломали. Определенно, есть некоторые отличия.
4. Когда вы говорите «следующая» ветвь, какую вы имеете в виду? Я только что установил версию 2.4.2.
5.
ng2-charts@nextчто даст вам версию:3.0.0-rc.7
Ответ №2:
Наконец-то я заставил его работать с версией 2.X. Я в основном выровнял иерархическую структуру данных и добавил нули в несколько массивов данных. Ниже приведен код, который даст вам двухслойную диаграмму пончиков со вторым слоем, показывающим разделение раздела первого слоя.
public summaryTreeChartLabels: Label[] = ['asdf', 'sdgf', 'dfhg', 'asdf_1', 'asdf_2', 'sdgf_1', 'sdgf_2', 'dfgh_1', 'dfgh_2'];
public summaryTreeChartData = [[34, 50, 26, 0,0,0,0,0,0], [0,0,0, 14, 20, 30, 20, 10, 16]];
public summaryTreeChartType: ChartType = 'doughnut';
