时间戳

首页 > 解决方案 > 访问 arearange HighCharts 图表中的 svg 元素

svg - 访问 arearange HighCharts 图表中的 svg 元素

问题描述

以下代码的最后一行（从 HighCharts 演示图表页面粗暴地复制）更改了arearange系列的不透明度：

var chart=Highcharts.chart('container', {

    series: [{
        name: 'Temperature',
        data: averages,
        zIndex: 1,
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
        }
    }, {
        name: 'Range',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
            enabled: false
        }
    }]
});

chart.series[1].update({fillOpacity:0.7},true);

JSFiddle在这里。

（不透明度可以直接在图表对象内部设置，但我需要在图表创建后修改它，代码是一个玩具示例来模拟我的需求）

我的真实图表有几个arearange系列，更新它们很繁重。有没有办法修改此类属性以避免该.update方法？那它，有没有办法直接访问svg对应arearange系列的元素？

我已经尝试检查 series.graph属性，正如之前在对类似问题的回答中所建议的那样，但在这种情况下，arearangeseries 没有.graph属性。

标签： svghighcharts

解决方案

它可以与您的问题中提到的答案完全相同，但graph您必须修改area属性而不是修改。

代码：

  chart.series[1].area.attr({
    fill: 'rgba(124,181,236,0.7)'
  });

演示：

推荐阅读