1

Подскажите пожалуйста, как установить градиент в диаграмму?

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Онлайн', 'Офлайн'],
        datasets: [{
            label: '# of Votes',
            data: [2, 2],
            backgroundColor: [
                '#62b547',
                '#7e4be8'
            ],
            borderColor: [
                '#62b547',
                '#7e4be8'
            ],
            borderWidth: 0
        }]
    },
    options: {
		legend: {
            display: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
		}
    }
});
<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.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

2 ответа 2

1

Градиент ставится вот так: background: linear-gradient(45deg, #fff 0%, #000 50%);

Но тут нужно ставить background-image а не background color

1

Вот рабочий пример:

var purple_orange_gradient = bar_ctx_red.createLinearGradient(0, 0, 0, 150);
purple_orange_gradient.addColorStop(0, '#ff003a');
purple_orange_gradient.addColorStop(1, "transparent");

Дальше переходим в созданную date и изменяем параметры:

datasets: [
      {
        data: [60, 70, 58, 42, 67, 60, 64, 42, 60, 46, 90, 61, 20, 34, 13, 60, 70, 58, 42, 67, 60, 64, 42, 60, 46, 90, 61, 80, 58, 13, 60],
        backgroundColor: purple_orange_gradient,
        hoverBackgroundColor: purple_orange_gradient,

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.