0

現在、Highchartsグラフライブラリを使用しており、線と面グラフの塗りつぶしの間にスペースを追加しようとしていますが、方法が見つからないようです。誰かがこれに対する解決策/ハックを持っていますか？

実際のhighcharts.jsJavaScriptハックは大歓迎です。

これが私が持っているものです：

現在のグラフ

これが私が達成しようとしていることです：

ここに画像の説明を入力してください

それがまったく役に立たないというわけではありませんが、これが私の現在のコードです：

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 に答える