图表区域在单击-chart.js时未突出显示

ahy6op9u  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(237)

我有一个条形图,在点击任何标签值时,需要用不同的颜色突出显示图表区域。我已经实现了逻辑,它工作得很好。但当鼠标稍微悬停时,该区域不会在单击时高亮显示。如何使选定区域在单击事件中突出显示?
onclick事件中的代码:

onClick: function (e) {
                        var activepoints = myChart.getElementsAtEvent(e);
                        var chartdata = activepoints[0]['_chart'].config.data;
                        var selectedIndex = activepoints[0]._index;
                        var label = chartdata.labels[selectedIndex];
                        //var value = chartdata.datasets[0].data[selectedIndex];
                        $scope.Reset();
                        $scope.HighLightSelectedChartArea(selectedIndex);
}

    $scope.HighLightSelectedChartArea = function (SelectedIndex) {
        Chart.pluginService.register({
            beforeDraw: function (chart, easing) {
                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;

                    var columnCount = chart.data.datasets[0].data.length;
                    var width = chartArea.right - chartArea.left;
                    var height = chartArea.bottom - chartArea.top;

                    var columnWidth = width / columnCount;
                    ctx.save();
                    var startPoint = chartArea.left;

                    //Reset chart area to default color
                    ctx.fillStyle = "#ffffff";
                    ctx.fillRect(startPoint, chartArea.top, width, height);

                    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;

                    if (SelectedIndex != 0)
                        startPoint += columnWidth * SelectedIndex;
                    ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
                    ctx.restore();
                }
            }
        });
    }

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题