Question

我正在使用Charts.JS创建堆积条形图，看起来相当不错：

然而，我需要的是每个条形图完全填充网格，绿色值是百分比，而不是绝对值，红色值以相同的方式为100％ - 无论％绿色值是。

IOW，对于上面屏幕截图中显示的值，我需要每个条形图遍历整个宽度，并使用顶部栏作为示例，文本＆＃34;标记为＆＃34;在绿色部分应该是＆＃34; 99％＆＃34;

＆＃34; 99％＆＃34;标签应取代＆＃34; 17,724＆＃34;和＆＃34; 170＆＃34;应该完全消失。

这是目前使用的数据：

var priceComplianceData = {
    labels: [
        "Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce",
        "Get Fresh Sales",
        "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"
    ],
    datasets: [
    {
        label: "Price Compliant",
        backgroundColor: "rgba(34,139,34,0.5)",
        hoverBackgroundColor: "rgba(34,139,34,1)",
        data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
    },
    {
        label: "Non-Compliant",
        backgroundColor: "rgba(255, 0, 0, 0.5)",
        hoverBackgroundColor: "rgba(255, 0, 0, 1)",
        // The vals below have been multiplied by 10 (a 0 appended) so that the values are at least visible to the naked eye
        data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
    }
    ]
}

...然后将其添加到图表中：

var priceComplianceOptions = {
    scales: {
        xAxes: [
{
    stacked: true
}
        ],
        yAxes: [
{
    stacked: true
}
        ]
    },
    tooltips: {
        enabled: false
    }
};

var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d");
var priceBarChart = new Chart(ctxBarChart,
{
    type: 'horizontalBar',
    data: priceComplianceData,
    options: priceComplianceOptions
});

想到的是改变数据：

datasets: [
{
    label: "Price Compliant",
    backgroundColor: "rgba(34,139,34,0.5)",
    hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [99.0, 99.2, 99.4, 98.9, 99.1, 99.5, 99.6, 99.2, 99.7]
},
{
    label: "Non-Compliant",
    backgroundColor: "rgba(255, 0, 0, 0.5)",
    hoverBackgroundColor: "rgba(255, 0, 0, 1)",
    data: [1.0, 0.8, 0.6, 1.1, 0.9, 0.5, 0.4, 0.8, 0.3]
}
]

...然后使用第一个数据值作为标记绿色部分的数据值，附加＆＃34;％＆＃34;它。

这是一种明智的做法吗？还有更好的方法吗？

更新

提议的beforeInit / afterDraw不起作用;导致我或多或少可接受的图表：

......为了得到更多的麻烦而不是一个干草窝消防站：

...即使我将其添加为两个函数中的第一行：

if (chartInstance.id !== 1) return;

Answer 1

你的想法实际上非常好，但正如你在问题中宣称的那样，它不会是动态的，然后不会对这种类型的每个图表起作用。

使其动态化的一种方法是使用Chart.js plugins来处理beforeInit事件，以编辑数据以适应您的百分比问题，以及处理afterDraw事件的位置在栏上写下百分比：

Chart.pluginService.register({

    // This event helps to edit the data in our datasets to fit a percentage scale
    beforeInit: function(chartInstance) {

        // We first get the total of datasets for every data
        var totals = [];
        chartInstance.data.datasets.forEach(function(dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var total = 0;
                chartInstance.data.datasets.forEach(function(dataset) {
                    total += dataset.data[i];
                });
                totals.push(total);
            }
        });

        // And use it to calculate the percentage of the current data
        chartInstance.data.datasets.forEach(function(dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                // This ----------¬     is useful to add it as a string in the dataset
                // It solves      V      the problem of values with `.0` at decimals
                dataset.data[i] = '' + (dataset.data[i] / totals[i]) * 100;
            }
        });
    },

    // This event allows us to add the percentage on the bar
    afterDraw: function(chartInstance) {

        // We get the canvas context
        var ctx = chartInstance.chart.ctx;

        // And set the properties we need
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = '#666';

        // For every dataset ...
        chartInstance.data.datasets.forEach(function(dataset) {

            // If it is not the first dataset, we return now (no action)
            if (dataset._meta[0].controller.index != 0) return;

            // For ervery data in the dataset ...
            for (var i = 0; i < dataset.data.length; i++) {

                // We get the model of the data
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;

                // And use it to display the text where we want
                ctx.fillText(parseFloat(dataset.data[i]).toFixed(2) + "%", ((model.base + model.x) / 2), (model.y + model.height / 3));
            }
        });
    }
});

<小时/> 您可以看到此代码正常工作on this jsFiddle，结果如下：

如何使用Charts.JS创建堆积条形图，显示相对值而不是绝对值？

更新

1 个答案: