2

棒グラフを作成するためにHighChartsを使用しています。私の値は、最小の 0 から最大の 100k までの範囲です (例)。したがって、グラフの 1 つのバーが非常に小さく、もう 1 つのバーが非常に長くなる場合があります。HighCharts は、「対数スケーリング」の機能を導入しました。その例はここで見ることができます

私のjsコードはこのjsfiddleファイルに書かれています。横軸 (x 軸) を対数で表示したいと考えています。例に示すようにキータイプを挿入しましたが、スクリプトは停止する必要がある無限ループに入ります。

実行の欠陥は何ですか、または HighCharts の対数スケーリングはまだ成熟していませんか?

PS jsfiddle のコメント行が問題を引き起こしています

4

3 に答える 3

9

「公式」の方法にはまだバグがあるため、10 を底とするログで入力データを操作し、出力データをマスクして 10 を出力値にすることで、より手動でログ スケールを実現できます。こちらのhttp://jsfiddle.net/7J6sc/以下のコードで動作を確認してください。

function log10(n) {
 return Math.log(n)/Math.log(10);   
}

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar',
        marginRight: 200,
        marginLeft: 10,
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: [''],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '',
            align: 'high',
        },
        labels: {
            formatter: function() {
             return Math.round(Math.pow(10,this.value));
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -50,
        y: 100,
        floating: true,
        borderWidth: 1,
        shadow: true
    },
    tooltip: {
        formatter: function() {
            return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                   return Math.round(Math.pow(10,this.y)); 
                }
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [log10(4396)],
        "name": "A"},
    {
        "data": [log10(4940)],
        "name": "B"},
    {
        "data": [log10(4440)],
        "name": "C"},
    {
        "data": [log10(2700)],
        "name": "D"},
    {
        "data": [log10(2400)],
        "name": "E"},
    {
        "data": [log10(6000)],
        "name": "F"},
    {
        "data": [log10(3000)],
        "name": "G"},
    {
        "data": [log10(15000)],
        "name": "E"}],

});
于 2012-02-01T05:02:39.347 に答える
2

公式ドキュメントによると、まだ実験的であるため、そうである可能性があります。

"軸のタイプ。"linear" または "datetime" のいずれかになります。datetime 軸では、数値はミリ秒単位で指定され、時間や日などの適切な値に目盛りが付けられます。

2.1.6 の時点で、「対数」が実験的な機能として追加されていますが、まだ完全には実装されていません。デフォルトは「線形」です。

試してみてください: "linear"、定期的な間隔の "datetime"、不規則な間隔の "datetime"、実験的な "対数" 軸。

于 2012-01-25T11:22:05.927 に答える
2

まだ答えを探している人のために：

JSFiddle : http://jsfiddle.net/TuKWT/76/

またはSOスニペット：

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    title: {
        text: 'Negative'
    },
    xAxis: {
        categories: ['A','B','C','D','E','F','G','H'],
        title: {
            text: null
        }
    },
    yAxis: {
        type: 'logarithmic',
        //min: 0, <= THIS WILL CAUSE ISSUE 
        title: {
            text: null,
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.x + ':' + this.y + ' millions';
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: false
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        "data": [4396,4940,4440,2700,2400,6000,3000,15000],
        }],

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px"></div>

于 2015-08-25T09:36:28.750 に答える