在样式模式下为highcharts-halo设置自定义颜色-Java 学习之路

我在样式模式下使用Highcharts 6.0.1并尝试为特定点和对应的光环设置自定义颜色 .

我需要能够动态地将类名附加到系列中的某些点 . 这些点需要以不同的颜色显示，从而覆盖默认的系列颜色（ .highcharts-color-i ） .

我设法覆盖特定点的颜色，因为 point 对象接受一个可选的 className ，然后可以用它来设置饼图中切片颜色的样式 .

虽然光环的css规则被设置为继承对应的 .highcharts-color-i 的颜色，并且因为它不是该点的子元素，所以它不能继承自定义类名 .

这是一段代码片段 . 您可以看到，当鼠标悬停在灰色切片上时，光晕使用默认颜色 .

Highcharts.chart('container', {
    title: {
        text: 'Pie point CSS'
    },
    tooltip: {
     pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    series: [{
        type: 'pie',
        keys: ['name', 'y', 'className'],
        data: [
            ['Point1', 29.9,],
            ['Point2', 14.5],
            ['Point3', 11.5],
            ['Point4', 54.5, 'custom-style'],
        ],
    }]
});

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 400px;
	max-width: 800px;
	min-width: 320px;
	margin: 0 auto;
}
.highcharts-tooltip {
  stroke: gray;
}
.highcharts-pie-series .highcharts-point {
	stroke: #EDE;
	stroke-width: 2px;
}
.highcharts-pie-series .highcharts-data-label-connector {
	stroke: silver;
	stroke-dasharray: 2, 2;
	stroke-width: 2px;
}

.highcharts-pie-series .highcharts-point.custom-style,
.highcharts-pie-series .highcharts-data-label-connector.custom-style {
	stroke: lightgray;
	stroke-dasharray: white;
	stroke-width: 1px;
  fill:lightgray;
}

<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container"></div>

1 回答

2
光环是一系列的属性（不是一个点 - 每个系列只能存在一个光环） . 在DOM树中，它与其余点处于同一级别 .

你可以使用point的 mouseOver 事件来设置光环的颜色：
```
plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            var point = this,
              className = point.className;
            if (className) {
              point.series.halo.attr({
                class: 'highcharts-halo custom-style'
              });
            }
          }
        }
      }
    }
  }
```
.highcharts-halo.custom-style 选择器用于通过CSS进行样式设置 .

Live demo: http://jsfiddle.net/kkulig/fv0zen7L/

API reference:
- https://api.highcharts.com/highcharts/plotOptions.pie.events.mouseOver
- https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
回复于 2024-05-03T03:16:01+08:00

在样式模式下为highcharts-halo设置自定义颜色

1 回答

相关问题