How set color family to pie chart in chart.js

后端 未结 4 865
春和景丽
春和景丽 2020-12-10 04:31

I am trying to draw a pie chart using Chart.js. My values are coming from a database hence I don\'t know how many values there are going to be in the database. Here I want t

4条回答
  •  慢半拍i
    慢半拍i (楼主)
    2020-12-10 04:46

    I have created a simple color family with 15 different colors.
    They are not randomly chosen. Instead, the colors have been chosen to maximize the difference between near colors.

    You can still create the chart with less than 15 data points and no warning will be generated.

    Here is the code:

    ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                label: 'Colors',
                data: [9, 8, 7, 6, 5, 4, 3, 2, 1],
                backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]
            }],
            labels: ['a','b','c','d','e','f','g','h','i']
        },
        options: {
            responsive: true,
            title:{
                display: true,
                text: "Color test"
            }
        }
    });
    

    This is the html:

    
    

    If you want to play with it, here is the code on jsfiddle.

    I hope this will help :)

提交回复
热议问题