我有一个条形图,在点击任何标签值时,需要用不同的颜色突出显示图表区域。我已经实现了逻辑,它工作得很好。但当鼠标稍微悬停时,该区域不会在单击时高亮显示。如何使选定区域在单击事件中突出显示?
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();
}
}
});
}
暂无答案!
目前还没有任何答案,快来回答吧!