Question

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

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

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

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

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

＆＃13;

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'],
        ],
    }]
});

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 1

Halo是一系列的属性（不是一个点 - 每个系列只能存在一个晕）。在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进行样式设计。

现场演示： http://jsfiddle.net/kkulig/fv0zen7L/

API参考：

在样式模式

1 个答案: