如何在chart.js中自定義水平條？

我想定製我的水平條形圖。我的圖表看起來像這樣。如何在chart.js中自定義水平條？

，但我想這樣的圖表。

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

我如何得到這樣的？

來源

2017-07-22 Shaon shaonty

你會需要3爲每個發佈單獨的值。你現在有嗎？ –

是的，我有3個價值。 –

實際上是3年，但是，在2015年有2個不同的發佈商，那麼橫條的顏色將會改變。 –

這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, 
     }] 
    } 
    } 
});

來源

2017-07-23 11:06:23

如何在chart.js中自定義水平條？

回答

相關問題