如何在高图中的条形图内放置阴影? [英] How to put shadow inside of bar chart in highcharts?

问题描述

如何将阴影放置在条形图中，例如高阴影图中的框阴影插图(css)，如下图所示.
谢谢.祝你有美好的一天〜

在此处输入图片描述

How to put shadow inside of bar chart like box-shadow inset(css) in hightcharts as image below.
Thank you. Have a good day~

enter image description here

推荐答案

您可以使用两个重叠系列，一个具有默认的shadow属性，并在load事件中将它们两个都转换几个像素:

You can use two overlap series, one with default shadow property and translate both of them by a few pixels in load event:

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            load: function() {
                this.series[0].points[0].graphic.attr({
                    translateX: -2
                });

                this.series[1].points[0].graphic.attr({
                    translateX: -2
                });
            }
        }
    },
    ...,
    series: [{
        ...,
        data: [100],
        shadow: {
            color: 'gray',
            opacity: 0.8,
            width: 2
        }
    }, {
        data: [50]
    }]
});

实时演示: http://jsfiddle.net/BlackLabel/b7hp0r6s/

API参考: https://api.highcharts .com/highcharts/series.bar.shadow

这篇关于如何在高图中的条形图内放置阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！