如何向左移动标签、将其涂黑或将其移除 (Chart.JS)？

Question

我有一个水平条形图显示如下：

由于条形图上的第二个数据值（1.0、0.8 等）被部分遮盖，我想按优先顺序执行以下操作之一：

将它们向左移动，使它们完全可见
将他们的字体从白色改成黑色，这样他们就完全可见了
将它们全部移除，让它们完全不可见

导致它们被写在第一（第二？）位置的代码是这样的：

    Chart.pluginService.register({
        afterDraw: function (chartInstance) {
            if (chartInstance.id !== 1) return; // affect this one only
            var ctx = chartInstance.chart.ctx;
            // render the value of the chart above the bar
            ctx.font = Chart.helpers.fontString(14, 'bold', 
Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            chartInstance.data.datasets.forEach(function (dataset) {
                for (var i = 0; i < dataset.data.length; i++) {
                    var model = dataset._meta[Object.keys(dataset._me
[0]].data[i]._model;
                    ctx.fillText(dataset.data[i]
(Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x
model.base) / 2), model.y + (model.height / 3));
                }
            });
        }
    });

...但我看不到在哪里可以根据需要操纵这些值。

关于上下文和完整披露，这里是所有图表代码：

        Chart.pluginService.register({
            afterDraw: function (chartInstance) {
                if (chartInstance.id !== 1) return; // affect this one only
                var ctx = chartInstance.chart.ctx;
                // render the value of the chart above the bar
                ctx.font = Chart.helpers.fontString(14, 'bold'
Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                chartInstance.data.datasets.forEach(function (dataset) {
                    for (var i = 0; i < dataset.data.length; i++) {
                        var model = dataset._meta[Object.keys(dataset._met
[0]].data[i]._model;
                        ctx.fillText(dataset.data[i] 
(Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x 
model.base) / 2), model.y + (model.height / 3));
                    }
                });
            }
        });

        var ctxBarChart 
$("#priceComplianceBarChart").get(0).getContext("2d");
        var priceComplianceData = {
            labels: [
                "Bix Produce", "Capitol City", "Charlies Portland", "Cost
Fruit and Produce",
                "Get Fresh Sales",
                "Loffredo East", "Loffredo West", "Paragon", "Piazz
Produce"
            ],
            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]
            }
            ]
        }

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

        var priceBarChart = new Chart(ctxBarChart,
        {
            type: 'horizontalBar',
            data: priceComplianceData,
            options: priceComplianceOptions
        });

我正在使用 Chart.js 版本 2.2.2

Answer 1

第一种解决方案：向左移动

在您的插件中，如果是第二个数据集，请将上下文 textAlign 属性设置为 right：

chartInstance.data.datasets.forEach(function(dataset) {
    for (var i = 0; i < dataset.data.length; i++) {
        var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;

        // If it is the second dataset (red color) ..
        if (dataset._meta[0].controller.index== 1) {
            // .. align to the right
            ctx.textAlign ="right";
            // .. and write it at the right bound of the chart
            ctx.fillText(parseFloat(dataset.data[i]).toFixed(2) + "%", (model.x - 2), (model.y + model.height / 3));

           // This looks like it has been moved a bit to the left
        }

        // Else ..
        else {
            // .. write as usual
            ctx.fillText(parseFloat(dataset.data[i]).toFixed(2) + "%", ((model.base + model.x) / 2), (model.y + model.height / 3));
        }
    }
});

检查结果on this jsFiddle。

第二种解决方案：将文本设为黑色

在您的插件中，将上下文 fillStyle 属性设置为您想要的颜色（#000 例如）：

afterDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    // render the value of the chart above the bar
    ctx.font = Chart.helpers.fontString(14, 'bold',
        Chart.defaults.global.defaultFontFamily);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // Here:
    ctx.fillStyle = "#000";

    chartInstance.data.datasets.forEach(function(dataset) {
        // ...
    });
});

检查结果on this jsFiddle。

第三个解决方案：删除它，简单明了

在你的插件中添加一个条件来检查你当前正在处理哪个数据集：

chartInstance.data.datasets.forEach(function(dataset) {
    for (var i = 0; i < dataset.data.length; i++) {

        // If it is the second dataset (red color), we break out of the loop
        if (dataset._meta[0].controller.index == 1) break;

        var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;

        ctx.fillText(parseFloat(dataset.data[i]).toFixed(2) + "%", ((model.base + model.x) / 2), (model.y + model.height / 3));
    }
});

检查结果on this jsFiddle。

如何向左移动标签、将其涂黑或将其移除 (Chart.JS)？

How can I move a label left, paint it black, or remove it (Chart.JS)?

javascript

chart.js

chart.js2

第一种解决方案：向左移动

第二种解决方案：将文本设为黑色

第三个解决方案：删除它，简单明了