0

我目前正在使用 Highcharts 图形库，并试图在面积图的线条和填充之间添加空间，但似乎找不到方法。有人对此有任何解决方案/黑客吗？

欢迎使用实际highcharts.js的 javascript hack。

这是我所拥有的：

当前图表

这是我想要达到的目标：

在此处输入图像描述

并不是说它会有所帮助，但这是我当前的代码：

var chart = new Highcharts.Chart({
    chart: {
        type: 'area',
        renderTo: 'test-trending-chart',
        backgroundColor:'#5473B4',
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0,
        marginLeft: -3,
        marginRight: -3
    },
    credits: {
        enabled: false
    },
    title: {
        text: ""
    },
    tooltip: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions:{
        area: {
            shadow: false,
            animation: false,
            states: {
                hover: {
                    enabled: false
                }
            },
            marker: {
                lineColor: '#5473B4',
                lineWidth: 2,
                radius: 5
            },
            lineWidth: 3,
            fillColor: {
                linearGradient: [0,0,0,100],
                stops: [
                    [0,'rgba(255,255,255,0.5)'],
                    [1,'rgba(255,255,255,0.75)']
                ]
            }
        }
    },
    series: [{
        color: 'white',
        data: [36,40,23,42,65]
    }],
    xAxis: {
       lineWidth: 0,
       minorGridLineWidth: 0,
       lineColor: 'transparent',        
       labels: {
           enabled: false
       },
       minorTickLength: 0,
       tickLength: 0
    },
    yAxis: {
        lineWidth: 0,
       minorGridLineWidth: 0,
       gridLineWidth: 0,
       lineColor: 'transparent',        
       labels: {
           enabled: false
       },
       minorTickLength: 0,
       tickLength: 0,
       title: {
            text: ""
        }
    }
});
4

1 回答 1

2

编辑：一种更优雅的解决方案，不需要您进行编辑highcharts.js，而是使用原型来扩展 Highcharts。在实例化任何图表之前，将以下 Javascript 片段添加到您的代码中：

Highcharts.Series.prototype.drawGraph = (function (func) {
        return function () {
            func.apply(this, arguments);
            if (typeof this.options.areaPadding !== "undefined"){
                for (i=2;i<this.areaPath.length;i+=3){
                    this.areaPath[i]+=this.options.areaPadding;
                }
            }
        };
    } (Highcharts.Series.prototype.drawGraph));

然后areaPadding像这样使用参数在线条和区域之间添加空间：

var chart = new Highcharts.Chart({
    plotOptions:{
        area: {
            areaPadding: 4   
        }
    }
});

在此处查看实际操作：http: //jsfiddle.net/AAQEq/

于 2013-03-06T22:17:33.587 回答