2

d3 javascript グラフ作成ライブラリのラッパーとして c3 を使用しています。独自のデモでも、データが更新されるとスクロール バーが一瞬ちらつくことがわかります。

彼らの場合のように、ページにすでにスクロールバーがある場合、これは問題ではありません。ただし、ページが小さい場合、追加や突然の削除、またはスクロールバーが不快になる可能性があります.

私たちは彼らの例と大きく異なることはしていません。謎は、スクロールバーがジャンプする理由です。何か案は？私のコードを見たいなら、それは打撃です：

データは、SignalR を使用して AngularJS ディレクティブに渡されます

$scope.$watch('data', function () {
    normalizedData = normalize($scope.data);

    chart.load({
        columns: getChartDataSet(normalizedData)
    });
});

正規化されたデータを取得した後、単純に配列に設定されてから C3 に渡されます

var chart = c3.generate({
    bindto: d3.select($element[0]),
    data: {
        type: 'donut',
        columns: [],
        colors: {
            '1¢': '#2D9A28',
            '5¢': '#00562D',
            '10¢': '#0078C7',
            '25¢': '#1D3967',
            '$1': '#8536C8',
            '$5': '#CA257E',
            '$10': '#EC3500',
            '$20': '#FF7D00',
            '$50': '#FBBE00',
            '$100': '#FFFC43'
        }
    },
    tooltip: {
        show: true  
    },
    size: {
        height: 200,
        width: 200
    },
    legend: {
        show: true,
        item: {
            onmouseover: function (id) {
                showArcTotal(id);
            },
            onmouseout: function (id) {
                hideArcTotal();
            }
        }
    },
    donut: {
        width: 20,
        title: $scope.label,
        label: {
            show: false,
            format: function(value, ratio, id) {
                return id;
            }
        }
    }
});
4

2 に答える 2

1

C3 がチャートを描画するとき、<body>`style="visibility:hidden" であっても、要素の下部に SVG を追加します。CSSクラスを追加しました

body > svg { height:0px !important }

これで問題は解決しました。

于 2015-01-26T20:41:14.420 に答える