круговая диаграмма внутри кольцевой диаграммы, используя диаграмму JS - PullRequest
Новая
       14

круговая диаграмма внутри кольцевой диаграммы, используя диаграмму JS

0 голосов
/ 10 мая 2018

Я использую диаграммы JS, чтобы рисовать красивые графики для своего проекта.Теперь мне нужно нарисовать круговую диаграмму внутри кольцевой диаграммы следующим образом: enter image description here

Данные в кольцевой диаграмме не зависят от данных внутри круговой диаграммы.Цвет также не имеет значения.У кого-нибудь есть идеи?

Я могу нарисовать только круговую диаграмму и кольцевую диаграмму отдельно)) 

function drawOperatorStatusChart(labels, data, title, colors) {

new Chart(document.getElementById("pie_chart_operator"), {
    type: 'pie',
    data: {
        labels: labels,
        datasets: [{
            label: data,
            backgroundColor: colors,
            data: data
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return secondsToHHMMSS(data['datasets'][0]['data'][tooltipItem['index']]);
                }
            }
        },
        title: {
            display: true,
            text: title
        }
    }
});
}

function drawReportDetailedDoughnutChart(labels, data, title, colors) {

var ctx = document.getElementById('operator_detailed_doughnut_chart').getContext('2d');

new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        datasets: [{
            label: "",
            backgroundColor: colors,
            data: data
        }]
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: title
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});
}

1 Ответ

0 голосов
/ 10 мая 2018

Я бы поэкспериментировал с абсолютной позицией.

См. Образец моей идеи: http://jsfiddle.net/zteak2uq/

<canvas class="absolute" id="standChart"></canvas>

...