带发光或阴影的ChartJS点样式

5lwkijsr  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(202)

如何在ChartJS中实现这种设计?我已经有代码了,但是缺少活动点的“发光”

这是我的密码

  1. dataset._meta[metaIndex].data[index]._model.pointStyle = 'rectRot';
  2. dataset._meta[metaIndex].data[index]._model.pointRadius = 7;
  3. dataset._meta[metaIndex].data[index]._model.borderColor = '#007cff';
  4. dataset._meta[metaIndex].data[index]._model.pointBackgroundColor = '#FFFFFF';
  5. dataset._meta[metaIndex].data[index]._model.pointBorderWidth = 10;
  6. dataset._meta[metaIndex].data[index]._model.pointBorderColor = 'rgba(1, 124, 251, 0.2)';
  7. dataset._meta[metaIndex].data[index]._model.pointHoverRadius = 5;

更新日期:

我用这些代码复制了它

  1. dataset._meta[metaIndex].data[index]._model.pointStyle = 'rectRot';
  2. dataset._meta[metaIndex].data[index]._model.radius = 7;
  3. dataset._meta[metaIndex].data[index]._model.borderColor = '#007CFF';
  4. dataset._meta[metaIndex].data[index]._model.backgroundColor = '#FFFFFF';
  5. dataset._meta[metaIndex].data[index]._model.borderWidth = 3;

和选项中

  1. const options = {
  2. elements: {
  3. point: {
  4. hoverRadius: 5,
  5. hoverBackgroundColor: '#FFFFFF',
  6. hoverBorderColor: 'rgba(1, 124, 251, 0.2)',
  7. hoverBorderWidth: 15,
  8. radius: 4,
  9. hitRadius: 5,
  10. },
  11. },
  12. };
4urapxun

4urapxun1#

您可以将两个具有不同样式的不同数据加入至数据集,以达成此目的。
codesandbox

  1. datasets: [
  2. {
  3. data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
  4. pointStyle: 'rectRot',
  5. pointRadius: 10,
  6. borderColor: '#007cff',
  7. pointBackgroundColor: '#FFFFFF',
  8. pointBorderWidth: 5,
  9. pointBorderColor: 'rgba(1, 124, 251, 0.2)',
  10. order: 1
  11. },
  12. {
  13. data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
  14. pointStyle: 'rectRot',
  15. pointRadius: 6,
  16. borderColor: '#007cff',
  17. pointBackgroundColor: '#FFFFFF',
  18. pointBorderWidth: 2,
  19. pointBorderColor: '#007cff',
  20. order: 0
  21. },
  22. ]
展开查看全部

相关问题