Я хочу настроить свою горизонтальную гистограмму. Моя диаграмма выглядит так.

enter image description here

Но я хочу, чтобы диаграмма была такой.

enter image description here

Я использую 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
Shaon shaonty 22 Июл 2017 в 20:53
Вам понадобится 3 отдельных значения для каждого издателя. У вас это есть сейчас?
 – 
ɢʀᴜɴᴛ
22 Июл 2017 в 21:05
Да у меня значение 3 сперата.
 – 
Shaon shaonty
22 Июл 2017 в 21:06
Фактически 3 года, но пусть в 2015 году будет 2 разных издателя, тогда цвет горизонтальной полосы будет изменен.
 – 
Shaon shaonty
22 Июл 2017 в 21:18

1 ответ

Лучший ответ

Этот JsFiddle может вам помочь. Источник JsFiddle: Github Issue.

enter image description here

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
Kawsar Ahmed 23 Июл 2017 в 14:21