如何在highcharts中降低图表不透明度

ebdffaop 于 2023-01-13 发布在 Highcharts

关注(0)|答案(1)|浏览(218)

我正在尝试降低图表的不透明度，而不是在单击图例时隐藏。示例：当我点击东京传奇系列蓝色列隐藏，而不是隐藏我想减少不透明度为0.34蓝色列.同样为其他图例时，点击.那么，如何做到这一点？

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Monthly Average Rainfall'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ],
    crosshair: true
},
yAxis: {
    min: 0,
    title: {
        text: 'Rainfall (mm)'
    }
},
tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    },
       series: {
        events: {
            legendItemClick: function(event) {
                var visibility = this.visible ? '0.35' : '';
                alert(event);
            }
        }
    },
},
series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4,
        194.1, 95.6, 54.4]

}, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5,
        106.6, 92.3]

}, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3,
        51.2]

}, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8,
        51.1]

}]
});

https://www.highcharts.com/demo/column-basic
演示：https://jsfiddle.net/4t6arfg8/

highcharts

来源：https://stackoverflow.com/questions/75091464/how-to-decrease-the-chart-opacity-in-highcharts

1条答案

按热度按时间

r3i60tvu1#

您使用了正确的事件，剩下的事情是更改适当的SVG元素的不透明度并为图例项着色。

series: {
  events: {
    legendItemClick: function(e) {
      const series = this;
      const chart = series.chart;
      const hasChangedOpacity = series.hasChangedOpacity;

      series.group.attr({
        opacity: hasChangedOpacity ? 1 : 0.2
      });
      chart.legend.colorizeItem(series, hasChangedOpacity);
      series.hasChangedOpacity = !hasChangedOpacity;
      // prevent default behaviour
      return false;
    }
  }
}

此外，要保持默认的系列状态行为，您需要添加以下小插件：

(function(H) {
  H.wrap(H.Series.prototype, 'setState', function(proceed) {
    if (!this.hasChangedOpacity) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    }
  });
}(Highcharts));

实时演示：https://jsfiddle.net/BlackLabel/p1x6937f/
API参考：https://api.highcharts.com/highcharts/series.column.events.legendItemClick
文件：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

赞(0）回复(0）举报 2023-01-13

我来回答

如何在highcharts中降低图表不透明度

1条答案

相关问题

热门标签

最新问答