svg - Highcharts 使用图表上的点进行操作

Question

我正在寻找一种方法来访问图形实际 svg 对象上的每个点，以便即时更改其某些属性。

假设我有 100 个对象，其中大约 50% 需要用不同的颜色绘制（尽管它们属于同一个数据系列，但没有办法）。因此，通过使用：

chart.series[0].points

我可以修改对象属性（如填充），但之后无法重绘图表。使用 chart.redraw() 什么也没有，实际上它会改变点的颜色，但只有在我将鼠标悬停在它们上之后，图表本身才不会正确重绘。

任何帮助表示赞赏。

问候！

Answer 1

至少有两种方法可以在这里使用。

加载
时您可以在将每个点添加到数据数组时明确定义每个点的颜色。以下是文档说明的内容

具有命名值的对象列表。在这种情况下，对象是点配置对象，如下所示。

范围系列值由低和高给出。例子：

data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]

参考：http ://api.highcharts.com/highcharts#series.data

jsFiddle @ http://jsfiddle.net/jugal/mXPPH/

动态您可以使用以下方法
将颜色/标记添加到各个点，point.update()

var p = chart.series[0].points[l - 1];
p.update({
    marker: {
        symbol: 'square',
        fillColor: "#A0F",
        lineColor: "A0F0",
        radius: 5
    }
});

参考：http ://api.highcharts.com/highcharts#Point.update%28%29

您可能还想查看我为这个问题提供的类似答案@ Dynamically draw marker on last point in highcharts and its jsFiddle @ http://jsfiddle.net/jugal/zJZSx/