如何自定义中的水平条chart.js?

2024-03-28 13:09:44 发布

您现在位置:Python中文网/ 问答频道 /正文

我想定制我的水平条形图。我的图表是这样的。在

enter image description here

但我想要这样的图表。在

enter image description here

我使用django从后端获取值和级别。这里的条颜色不同于person。 我的设置是:

模型.py

class Publication(models.Model):

    person = models.ForeignKey( Person, on_delete=models.CASCADE )
    publisher = models.CharField(max_length=300, blank=True)
    publication_Date = models.CharField(max_length=4, blank=True)

    def __str__(self):
        return self.publisher 

我从这个方法中得到价值和水平:

^{pr2}$

图表设置:

var ctx = document.getElementById("publisher");
var data = {
        labels: {{ publisher.level|safe }},
        datasets: [{
            label: 'Publications by publisher',
            backgroundColor: [
                'rgb(77, 148, 255)',
                'rgb(179, 0, 0)',
                'rgb(57, 230, 0)',
                'rgb(184, 0, 230)',
            ],
            data: {{ publisher.value|safe }},
            scaleSteps : 10,
        }]
    };
$('#publisher').css('background-color', '#2f3133');
var publisher = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
    scales: {
        yAxes: [{
            barThickness : 35
        }],
        xAxes: [{
                 ticks: {
                    beginAtZero: true,
                    suggestedMin: 0,
                    suggestedMax: 10,
                    scaleSteps: 5,
                },
            }
            ]
    }
}
});

我怎么会变成这样?在


Tags: selftruedatamodelsvar图表水平rgb