Question

我试图更改ChartJS中最后单击的条的不透明度，然后在下次单击另一个条时将其“取消突出显示”。基本上是悬停的默认行为。请注意，这是一个堆积的条形图，我希望整个条形列的不透明度都可以改变，而不是每个单独的部分都可以改变。

我已经可以点击将背景颜色（不确定如何更改不透明度）更改为黑色，但是当单击下一项时它并没有设置。因此，一旦单击所有内容，整个图表最终将变成黑色。

这是我当前正在使用的onclick代码：

            var myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                onClick: function(e){
                    myChart.update();
                    var element = this.getElementAtEvent(event)[0];
                    element.custom = element.custom || {};
                    element.custom.backgroundColor = '#000';
                    },
                }
            });

堆叠数据：

            var data = {
                "labels":["2011","2012","2013","2014","2015"],
                "datasets":[
                            {
                                "label":"Total Fishermen",
                                "backgroundColor":"#518936",
                                "data":[991,1020,731,850,851]
                            },
                            {
                                "label":"Total Processing Employees",
                                "backgroundColor":"#82c6d4",
                                "data":[0,0,130,0,0]
                            },
                            {
                                "label":"Total Aquaculture Employees",
                                "backgroundColor":"#c0136b",
                                "data":[0,134,130,119,0]
                            }
                        ]
                    };

任何帮助将不胜感激！

Answer 1

...，但是单击下一项时并不会取消设置。

您可以使用 active 属性来获取活动的组元素并使用当前的backgroundColor添加transparency的50％：

docker run --name test --network host -e "https_proxy=https://192.168.56.101:3128" -it alpine:latest wget https://www.web.de
wget: bad address 'www.web.de'

docker run --name test --dns 8.8.8.8 -e "https_proxy=https://192.168.56.101:3128" -it alpine:latest wget https://www.web.de
wget: bad address 'www.web.de'

docker run --name test -e "https_proxy=https://192.168.56.101:3128" -it alpine:latest wget https://www.web.de
wget: bad address 'www.web.de'

docker run --name test --network host --dns 8.8.8.8 -e "https_proxy=https://192.168.56.101:3128" -it alpine:latest wget https://www.web.de
wget: bad address 'www.web.de'

要重置最后点击的元素，可以在onClick处理程序中对所有元素进行循环：

this.active.forEach(function(ele, idx) {
    ele.custom = ele.custom || {};
    if (ele.custom.backgroundColor == undefined) {
        var color = ele._model.backgroundColor.replace(')', ', 0.5)');
        ele.custom.backgroundColor = color;
    } else {
        delete ele.custom.backgroundColor;
    }
});

for(i=0; i<this.data.datasets.length; i++) {
    this.getDatasetMeta(i).data.forEach(function(ele, idx) {
        if (ele.custom != undefined)
            delete ele.custom.backgroundColor;
    });
}

Chart.pluginService.register({
    afterInit: function (chart, options) {
        chart.pluginInitialized = true;
    },
    afterDraw: function (chart, options) {
        if (chart.pluginInitialized) {
            var centerIndex = Math.floor(chart.data.labels.length/2);
            for(var i=0; i<chart.data.datasets.length; i++) {
                chart.getDatasetMeta(i).data.forEach(function(ele, idx) {
                    var opacity = ' 0.3)';
                    if (idx == centerIndex) {
                        opacity = ' 1)';
                    }
                    ele.custom = ele.custom || {};
                    if (ele.custom.backgroundColor == undefined) {
                        var rgb = ele._model.backgroundColor;
                        var match = null;
                        if (match = rgb.match(/^#([a-fA-F0-9]{6})$/i)) {
                            rgb = 'rgb(';
                            match = match[1];
                            for (var j = 0; j < 3; j++) {
                                rgb += parseInt(match.slice(j * 2, j * 2 + 2), 16) + ',';
                            }
                            rgb += opacity;
                        }
                        ele.custom.backgroundColor = rgb;
                    }
                });
            }
            chart.pluginInitialized = false;
            chart.update(true);
        }
    }
});

var ctx = document.getElementById('ctx').getContext('2d');
var data = {
    "labels":["2011","2012","2013","2014","2015"],
    "datasets":[
        {
            "label":"Total Fishermen",
            "backgroundColor":"#518936",
            "data":[991,1020,731,850,851]
        },
        {
            "label":"Total Processing Employees",
            "backgroundColor":"#82c6d4",
            "data":[0,0,130,0,0]
        },
        {
            "label":"Total Aquaculture Employees",
            "backgroundColor":"#c0136b",
            "data":[0,134,130,119,0]
        }
    ]
};
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        onClick: function (e) {
            // remove old background opacity....
            for(i=0; i<this.data.datasets.length; i++) {
                this.getDatasetMeta(i).data.forEach(function(ele, idx) {
                    var rgx = /(rgba*\(\d{1,3}), *(\d{1,3}), *(\d{1,3}), *[0-9.]+(\))/;
                    ele._model.backgroundColor = ele._model.backgroundColor.replace(rgx, "$1, $2, $3$4");
                    if (ele.custom != undefined)
                        delete ele.custom.backgroundColor;
                });
            }
            // set backgrounf opacity....
            this.active.forEach(function(ele, idx) {
                ele.custom = ele.custom || {};
                if (ele.custom.backgroundColor == undefined) {
                    var color = ele._model.backgroundColor.replace(')', ', 0.5)');
                    ele.custom.backgroundColor = color;
                } else {
                    delete ele.custom.backgroundColor;
                }
            });
            myChart.update(true);
        }
    }
});

.graph {
    height: 500px;
    width: 500px;
    text-align: center;
}

在ChartJS中突出显示最后点击的栏

1 个答案: