1

私はHighchartライブラリを使用して棒グラフを開発しています.2つのy軸を作成しました.1つ目はTAM用で、2つ目はシェア用です.Shareはパーセンテージですが、TAMはそうではありません.Share y軸の値については、最大値を100にしました.固定ですが、TAM の場合、値は動的です。

グラフ参照

[http://jsfiddle.net/unidha/vGVRb/45/][1]

タムバーの高さに応じてシェアバーの高さを設定する必要があります。例えば、現在のタムワンは1230万台でシェアワンは70%です。グラフによると、シェアワンは軸があるのでタムワンより背が高いです。ワンズバーの高さ?

それを行うことは可能ですか?これまでの私の理解では、バーの高さは、他のバーの高さに基づいてではなく、y 軸によって決定する必要があります。

参考までに、上記の jsfiddle にあるのと同じコードを次に示します。

$(function () {
    $('#container').highcharts({
        chart: {
            type:'column',
            zoomType: 'xy',
            alignTicks:false
        },
          title: {
            text: 'Performance Snapshot'
        },

        xAxis: [{
            categories: ['Tam One   Share One ', ' Tam Two  Share Two  '],
            //NUR
            tickWidth:0
        }],

   yAxis: [{ // Primary yAxis
          labels: {
            //  format: '{value}%',
                style: {
                  //  color: '#89A54E'
                     color: 'FFFFFF'
                },
                //NUR
                step:2,
                y:0
            } ,
            min: 0,
             minRange:0.1,
             max:100,
            title: {
                text: 'Share',
                style: {
                 //   color: '#89A54E'
                    color: '#4572A7'
                }
            }
        }, { // Secondary yAxis
          title: {
                text: 'Tam',
                style: {
                    color: '#4572A7'
                }
            },

            labels: {
              //NUR  format: '{value} unit',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },

        series: [{
            name: 'Tam Unit',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [12300000, 34400000],
            tooltip: {
                valueSuffix: ' unit'
            },
             groupPadding: 0

        }, {
            name: 'Share',
            color: '#89A54E',
            type: 'column',
            data: [70,40],
            tooltip: {
                valueSuffix: '%'
            },
             groupPadding: 0
        }]

    });
});

ありがとう

4

1 に答える 1