水平堆积角条形图

Question

我正在尝试实现Angular水平堆叠条形图-类似于此示例 。

但是，我只希望堆叠一个条。

我正在使用AngularJS和Chart.js。 我在页面上显示了示例。

在PieController中，ChartData包含：

 {"data":["63","38"],"labels":["Ford","GM"]}

在示例中，我希望标签和数字位于图表内部，而不是外部的标签。 像[===== Ford 63 ==== | === GM 38 ===]一样，它们代表条形颜色。 数据点将比当前两个更多。

这是我的页面

<div ng-controller="PieController">
            data {{ChartData}}   //testing purposes
            <div ng-init="getBarChart()">
            <canvas id="Chart1"></canvas>
</div>

这是我的JavaScript控制器

app.controller('PieController', function($scope, ChartService) {


$scope.getBarChart = function(){
    ChartService.get({name: 'main'}, function(data) {
        $scope.ChartData = data;

        var barOptions_stacked = {
            tooltips: {
                enabled: false
            },
            hover: {
                animationDuration: 0
            },
            scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fontFamily: "'Open Sans Bold', sans-serif",
                        fontSize: 11
                    },
                    scaleLabel: {
                        display: false
                    },
                    gridLines: {},
                    stacked: true
                }],
                yAxes: [{
                    gridLines: {
                        display: false,
                        color: "#fff",
                        zeroLineColor: "#fff",
                        zeroLineWidth: 0
                    },
                    ticks: {
                        fontFamily: "'Open Sans Bold', sans-serif",
                        fontSize: 11
                    },
                    stacked: true
                }]
            },
            legend: {
                display: false
            },

            animation: {
                onComplete: function () {
                    var chartInstance = this.chart;
                    var ctx = chartInstance.ctx;
                    ctx.textAlign = "left";
                    ctx.font = "9px Open Sans";
                    ctx.fillStyle = "#fff";


                    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        Chart.helpers.each(meta.data.forEach(function (bar, index) {
                            data = dataset.data[index];
                            if (i == 0) {
                                ctx.fillText(data, 50, bar._model.y + 4);
                            } else {
                                ctx.fillText(data, bar._model.x - 25, bar._model.y + 4);
                            }
                        }), this)
                    }), this);
                }
            },
            pointLabelFontFamily: "Quadon Extra Bold",
            scaleFontFamily: "Quadon Extra Bold",
        };

        var ctx = document.getElementById("Chart1");
        var myChart = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
                labels: ["2014", "2013", "2012", "2011"],

                datasets: [{
                    data: [727, 589, 537, 543, 574],
                    backgroundColor: "rgba(63,103,126,1)",
                    hoverBackgroundColor: "rgba(50,90,100,1)"
                }, {
                    data: [238, 553, 746, 884, 903],
                    backgroundColor: "rgba(163,103,126,1)",
                    hoverBackgroundColor: "rgba(140,85,100,1)"
                }, {
                    data: [1238, 553, 746, 884, 903],
                    backgroundColor: "rgba(63,203,226,1)",
                    hoverBackgroundColor: "rgba(46,185,235,1)"
                }]
            },

            options: barOptions_stacked,
        })

    });//end chat service.get
}

});

有没有一种方法可以使用我在文章开头概述的数据“ ChartData”，而不是现在在数据集中进行硬编码？

我不确定该怎么做，甚至可能也不知道。

Answer 1

为了使标签显示在栏中，请参考$scope.ChartData的labels属性：

ctx.fillText($scope.ChartData.labels[index] +" "+ data, 50, bar._model.y + 4);

有没有一种方法可以使用我在文章开头概述的数据“ ChartData”，而不是现在在数据集中进行硬编码？

使用数据变量（由ChartService get函数提供）中的data.labels ，即data.labels和data.data而不是硬编码值。

因此，从以下位置更新标签行：

labels: ["2014", "2013", "2012", "2011"],

对此：

labels: data.labels,

对于数据集也类似：

datasets: [{
    data: data.data,

因此，在创建图表时，它应如下所示：

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: data.labels,
        datasets: [{
            data: data.data,
            backgroundColor: "rgba(63,103,126,1)",
            hoverBackgroundColor: "rgba(50,90,100,1)"
        }]
    },

    options: barOptions_stacked,
});

展开下面的代码片段进行演示。

_{注意：resize-listener目前存在问题，被CORS问题阻止-我正在尝试找到一种禁用该方法的方法。}

更新：

根据您对水平堆叠条的评论-是的，这是可能的。 每个数据集数组中只有一个元素。 一种简单的实现方法是使用Array.map（）创建一个类似于示例的数组：

var bgColors = [
    "rgba(63,103,126,1)",
    "rgba(50,90,100,1)"
];
var hoverBgColors = [
    "rgba(50,90,100,1)",
    "rgba(140,85,100,1)"
];
var datasets = data.data.map(function(value, index) {
    return {
      data: [value],
      backgroundColor: bgColors[index],
      hoverBackgroundColor: hoverBgColors[index]
    }
});

然后在创建Chart对象时使用变量数据集 ：

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: data.labels,
        datasets: datasets
    },
    options: barOptions_stacked,
});

另外，关于第二个标签的位置还有一些怪异的数学运算，但是可以像下面这样更新辅助函数（我尝试将x值除以75，但是可能需要调整-我不确定什么是“合适的”值适用于...）：

if (i == 0) {
    ctx.fillText($scope.ChartData.labels[i] + " " + data, 50, bar._model.y + 4);
} else {
    ctx.fillText($scope.ChartData.labels[i] + " " + data, (bar._model.x - 25) / 75, bar._model.y + 4);
}

 var app = angular.module('myApp', []); app.factory('ChartService', function() { return { //dummy chart service get: function(obj, callback) { var data = { "data": ["63", "38"], "labels": ["Ford", "GM"] }; callback(data); } }; }); app.controller('PieController', function($scope, ChartService) { $scope.getBarChart = function() { ChartService.get({ name: 'main' }, function(data) { $scope.ChartData = data; var barOptions_stacked = { tooltips: { enabled: false }, hover: { animationDuration: 0 }, scales: { xAxes: [{ ticks: { beginAtZero: true, fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, scaleLabel: { display: false }, gridLines: {}, stacked: true }], yAxes: [{ gridLines: { display: false, color: "#fff", zeroLineColor: "#fff", zeroLineWidth: 0 }, ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, stacked: true }] }, legend: { display: false }, animation: { onComplete: function() { var chartInstance = this.chart; var ctx = chartInstance.ctx; ctx.textAlign = "left"; ctx.font = "9px Open Sans"; ctx.fillStyle = "#fff"; Chart.helpers.each(this.data.datasets.forEach(function(dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); Chart.helpers.each(meta.data.forEach(function(bar, index) { data = dataset.data[index]; if (i == 0) { ctx.fillText($scope.ChartData.labels[i] + " " + data, 50, bar._model.y + 4); } else { ctx.fillText($scope.ChartData.labels[i] + " " + data, (bar._model.x - 25) / 75, bar._model.y + 4); } }), this) }), this); } }, pointLabelFontFamily: "Quadon Extra Bold", scaleFontFamily: "Quadon Extra Bold", }; var ctx = document.getElementById("Chart1"); var bgColors = [ "rgba(63,103,126,1)", "rgba(50,90,100,1)" ]; var hoverBgColors = [ "rgba(50,90,100,1)", "rgba(140,85,100,1)" ]; var datasets = data.data.map(function(value, index) { return { data: [value], backgroundColor: bgColors[index], hoverBackgroundColor: hoverBgColors[index] } }); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { //use empty labels because the labels are on the bars labels: data.labels.map(function() { return ''; }), datasets: datasets }, options: barOptions_stacked, }) }); //end chat service.get } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="PieController"> data {{ChartData}} //testing purposes <div ng-init="getBarChart()"> <canvas id="Chart1"></canvas>