Пользовательский JavaScript

JavaScript использует тот же элемент <canvas>, что и раньше, или, если вы хотите сохранить оба графика, вы можете добавить новый холст в HTML с другим ID:

<div class="container">
     <canvas id="myChart" width="600" height="400"></canvas>
</div>

В JavaScript мы теперь определяем тип графика как пончиковый. Остальная часть кода следует той же логике, что и раньше. Мы добавляем данные в качестве значений свойств labels и dataset объекта данных.

// Doughnut chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Dairy', 'Fruits', 'Lean meats', 'Vegetables', 'Whole grains'],
        datasets: [{
            data: [27.92, 17.53, 14.94, 26.62, 12.99],
            backgroundColor: ['#e91e63', '#00e676', '#ff5722', '#1e88e5', '#ffd600'],
            borderWidth: 0.5 ,
            borderColor: '#ddd'
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Recommended Daily Diet',
            position: 'top',
            fontSize: 16,
            fontColor: '#111',
            padding: 20
        },
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                boxWidth: 20,
                fontColor: '#111',
                padding: 15
            }
        },
        tooltips: {
            enabled: false
        },
        plugins: {
            datalabels: {
                color: '#111',
                textAlign: 'center',
                font: {
                    lineHeight: 1.6
                },
                formatter: function(value, ctx) {
                    return ctx.chart.data.labels[ctx.dataIndex] + '\n' + value + '%';
                }
            }
        }
    }
});

Как вы можете видеть выше, мы добавили настройки плагинов Data Labels в свойство options.plugin пончикового графика. Метод formatter() помещает метки данных (например, «Whole grains 12.99%») поверх нашего графика.

Была ли эта страница полезной?