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

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

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

  1. onClick: function (e) {
  2. var activepoints = myChart.getElementsAtEvent(e);
  3. var chartdata = activepoints[0]['_chart'].config.data;
  4. var selectedIndex = activepoints[0]._index;
  5. var label = chartdata.labels[selectedIndex];
  6. //var value = chartdata.datasets[0].data[selectedIndex];
  7. $scope.Reset();
  8. $scope.HighLightSelectedChartArea(selectedIndex);
  9. }
  10. $scope.HighLightSelectedChartArea = function (SelectedIndex) {
  11. Chart.pluginService.register({
  12. beforeDraw: function (chart, easing) {
  13. if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
  14. var ctx = chart.chart.ctx;
  15. var chartArea = chart.chartArea;
  16. var columnCount = chart.data.datasets[0].data.length;
  17. var width = chartArea.right - chartArea.left;
  18. var height = chartArea.bottom - chartArea.top;
  19. var columnWidth = width / columnCount;
  20. ctx.save();
  21. var startPoint = chartArea.left;
  22. //Reset chart area to default color
  23. ctx.fillStyle = "#ffffff";
  24. ctx.fillRect(startPoint, chartArea.top, width, height);
  25. ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
  26. if (SelectedIndex != 0)
  27. startPoint += columnWidth * SelectedIndex;
  28. ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
  29. ctx.restore();
  30. }
  31. }
  32. });
  33. }

暂无答案!

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

相关问题