Я хочу настроить свою горизонтальную гистограмму. Моя диаграмма выглядит так.
Но я хочу, чтобы диаграмма была такой.
Я использую django, чтобы получить значение и уровень из бэкэнда. Здесь цвет бара отличается на person. Мои настройки:
Models.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
Я получаю значение и уровень от этого метода:
def publication_by_publisher(self):
user_id = self.request.user.id
query = Person.objects.get(id=10)
publisher = query.publication_set.values('publisher').values('publication_Date').annotate(Count('publication_Date'))
level, value = [str(x.get('publication_Date')) for x in publisher], [y.get('publication_Date__count') for y in publisher]
context = {
'ob': query,
'publisher': publisher,
'level': level,
'value': value
}
return context
настройки диаграммы:
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,
},
}
]
}
}
});
Как мне стать таким?
0
22 Июл 2017 в 20:53
Вам понадобится 3 отдельных значения для каждого издателя. У вас это есть сейчас?
–
22 Июл 2017 в 21:05
Да у меня значение 3 сперата.
–
22 Июл 2017 в 21:06
Фактически 3 года, но пусть в 2015 году будет 2 разных издателя, тогда цвет горизонтальной полосы будет изменен.
–
22 Июл 2017 в 21:18
1 ответ
Лучший ответ
Этот JsFiddle может вам помочь. Источник JsFiddle: Github Issue.
HTML
<canvas id="myChart"></canvas>
Сценарий
Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar);
var helpers = Chart.helpers;
Chart.controllers.groupableBar = Chart.controllers.bar.extend({
calculateBarX: function (index, datasetIndex) {
// position the bars based on the stack index
var stackIndex = this.getMeta().stackIndex;
return Chart.controllers.bar.prototype.calculateBarX.apply(this, [index, stackIndex]);
},
hideOtherStacks: function (datasetIndex) {
var meta = this.getMeta();
var stackIndex = meta.stackIndex;
this.hiddens = [];
for (var i = 0; i < datasetIndex; i++) {
var dsMeta = this.chart.getDatasetMeta(i);
if (dsMeta.stackIndex !== stackIndex) {
this.hiddens.push(dsMeta.hidden);
dsMeta.hidden = true;
}
}
},
unhideOtherStacks: function (datasetIndex) {
var meta = this.getMeta();
var stackIndex = meta.stackIndex;
for (var i = 0; i < datasetIndex; i++) {
var dsMeta = this.chart.getDatasetMeta(i);
if (dsMeta.stackIndex !== stackIndex) {
dsMeta.hidden = this.hiddens.unshift();
}
}
},
calculateBarY: function (index, datasetIndex) {
this.hideOtherStacks(datasetIndex);
var barY = Chart.controllers.bar.prototype.calculateBarY.apply(this, [index, datasetIndex]);
this.unhideOtherStacks(datasetIndex);
return barY;
},
calculateBarBase: function (datasetIndex, index) {
this.hideOtherStacks(datasetIndex);
var barBase = Chart.controllers.bar.prototype.calculateBarBase.apply(this, [datasetIndex, index]);
this.unhideOtherStacks(datasetIndex);
return barBase;
},
getBarCount: function () {
var stacks = [];
// put the stack index in the dataset meta
Chart.helpers.each(this.chart.data.datasets, function (dataset, datasetIndex) {
var meta = this.chart.getDatasetMeta(datasetIndex);
if (meta.bar && this.chart.isDatasetVisible(datasetIndex)) {
var stackIndex = stacks.indexOf(dataset.stack);
if (stackIndex === -1) {
stackIndex = stacks.length;
stacks.push(dataset.stack);
}
meta.stackIndex = stackIndex;
}
}, this);
this.getMeta().stacks = stacks;
return stacks.length;
},
});
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(99,255,132,0.2)",
data: [59, 80, 81, 56, 55, 40, 65],
stack: 1
},
{
label: "My Second dataset",
backgroundColor: "rgba(99,132,255,0.2)",
data: [80, 81, 56, 55, 40, 65, 60],
stack: 2
},
{
label: "My Third dataset",
backgroundColor: "rgba(255,99,132,0.2)",
data: [60, 59, 80, 81, 56, 55, 40],
stack: 2
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'groupableBar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
max: 160,
},
stacked: true,
}]
}
}
});
1
23 Июл 2017 в 14:21
En Español