12

Flash ベースのチャート ライブラリ (FusionCharts) から JavaScript ベースのチャート ライブラリ (HighCharts) に移行しています。

現在のフラッシュ チャートは次のようになります。 現在のフラッシュ チャート

そして、これが私がこれまでに HighCharts で得たものです。 ここに画像の説明を入力

プロットの境界線と実際のチャート データの間のスペース (大きなダムの赤い矢印でマークされている) を削除するにはどうすればよいですか?

ここに私のコードがあります: http://jsfiddle.net/ChrisMBarr/7JAcN/1/

var chart = new Highcharts.Chart({
        chart:{
            renderTo: 'container',
            type: 'areaspline',
            plotBorderWidth: 1,
            spacingTop:2,
            spacingRight:5,
            spacingBottom:5,
            spacingLeft:2,
            borderWidth:1,
            borderRadius:0,
            borderColor:'#999'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Total spam in the last 7 days'
        },
        legend: {
            verticalAlign: 'bottom',
            borderWidth: 1,
            backgroundColor: '#FFFFFF'
        },
        xAxis: {
            allowDecimals:false,
            categories: [
                'Thu 2/14',
                'Fri 2/15',
                'Sat 2/16',
                'Sun 2/17',
                'Mon 2/18',
                'Tue 2/19',
                'Wed 2/20'
            ],
            labels: {
                staggerLines: 2
            },
            tickmarkPlacement: 'on',
        },
        yAxis: {
            allowDecimals:false,
            alternateGridColor: '#F7F7F7',
            title: {
                text: 'Number of Emails',
                margin:5
            }
        },
        tooltip: {
            formatter: function() {
                var isSpam = this.series.name === _chartOptions.series[1].name
                return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
            }
        },

        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },

        series:  [{
                "name": "Total Mail",
                "color":"#339999",
                "data": [2,3,4,7,8,8,8]
            },{
                "name": "Spam",
                "color":"#003399",
                "data": [2,2,4,4,4,6,8]
        }]
    });
4

4 に答える 4

14

これは役立つかもしれません：

xAxis: {
    min: 0.5, max: 5.5
...

ここで、最大 = データ ポイントの数から 1.5 を引いた数

于 2013-02-20T23:09:07.493 に答える
8

minPadding/maxPadding パラメーターを使用する必要がありますが、カテゴリでは機能しません。したがって、カテゴリを削除し、最小値と tickInterval を使用することをお勧めします

http://jsfiddle.net/7JAcN/3/ http://api.highcharts.com/highcharts#xAxis.minPadding

xAxis: {
        allowDecimals:false,
        minPadding:0,
        maxPadding:0,
        /*categories: [
            'Thu 2/14',
            'Fri 2/15',
            'Sat 2/16',
            'Sun 2/17',
            'Mon 2/18',
            'Tue 2/19',
            'Wed 2/20'
        ],*/
        labels: {
            staggerLines: 2
        },
        tickmarkPlacement: 'on',
    },
于 2013-02-22T11:20:38.747 に答える
0

オプション "tickmarkplacement" を "on" に設定すると、xAxis の " startontick " オプションが役立つ場合があります。

xAxis: {
    startOnTick: false,
    tickmarkplacement:"on",
    ...

Highcharts API ドキュメントからフォークされたこの jsfiddle を参照 してください

于 2013-02-20T23:24:46.003 に答える