如何在chart.js中自定义水平条？答案

【问题标题】：How to customize horizontal bar in chart.js?如何在chart.js中自定义水平条？
【发布时间】：2017-07-22 17:53:41
【问题描述】：

我想自定义我的水平条形图。我的图表是这样的。

但我想要这样的图表。

我使用 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,
                },
            }
            ]
    }
}
});

我怎么会这样？

【问题讨论】：

您需要为每个发布者设置 3 个单独的值。你现在有吗？
是的，我有 3 个单独的值。
其实3年了，但是假设2015年有2个不同的出版商，那么单杠颜色就会改变。

标签： python django bar-chart chart.js

【解决方案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,
      }]
    }
  }
});

【讨论】：