0

ハイチャートを使用してバブル チャートを作成しています。x、y、z 座標をデータとして渡します。下部に単一の凡例エントリを持つ異なる半径の円が表示されます。バブル チャートの個々の円の凡例が必要なので、個々のバブルに対して異なるシリーズを作成しました。凡例は異なりますが、円のサイズは同じです。以下の私のコードを見てください。これで何が間違っているのか教えてください。前もって感謝します




    $.each(input,function(index,value) {        
        red = Math.floor(Math.random() * 255);
        blue = Math.floor(Math.random() * 255);
        green = Math.floor(Math.random() * 255);    
        color = red  + ',' + green + ',' + blue;
        chartData .push({
            name : value.departmentName,                
            marker: {
                symbol:'circle',
                fillColor:{
                        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                        stops: [[0, 'rgba(255,255,255,0.5)'],[1, Highcharts.Color('rgba(' + color+ ',0.5)').brighten(-0.3).get('rgb')]]},

                lineColor:'rgba(' + color + ',.75)',
                lineWidth:1,           
                states:{
                    hover:{
                        enabled:false
                    }
                }
            },
            data: [{x:value.year, y:value.numberOfUsers, name: value.departmentName, marker: {radius:value.passcount,
                fillColor:{
                    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                    stops: [[0, 'rgba(255,255,255,0.5)'],[1, Highcharts.Color('rgba(' + color+ ',0.5)').brighten(-0.3).get('rgb')]]}}, z : value.passcount}]
           });      

        });
        return chartData;

    

    ...

    


     function drawChart (chartData){
            //High charts
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo:'container',                       
                    type: 'bubble',
                    plotBorderWidth: 1 ,
                    zoomType: 'xy'
                },
                title:{
                    text:''
                },
                exporting:{
                    enabled : false
                },
               credits: {
                enabled: false
               },
                plotOptions: {
                    series: {
                        shadow:false,
                    }           
                },
                xAxis:{
                    minPadding:.075,
                    maxPadding:.075,
                    lineColor:'#999',
                    lineWidth:1,
                    tickColor:'#666',
                    tickLength:3,
                    title:{
                        text:'My chart'
                    }
                },
                yAxis:{
                    lineColor:'#999',
                    lineWidth:1,
                    tickColor:'#666',
                    tickWidth:1,
                    tickLength:3,
                    gridLineColor:'#ddd',
                    title:{
                        text:'Number Of Users',
                        rotation:270,
                        margin:10,
                    }
                },
                series: chartData

            });

上記のコードの出力は次のとおりです

4

1 に答える 1

0

ご存知のように、Highcharts Bubbles はまだ正式にリリースされていません。ただし、最新の開発コードでは、バブルのサイズがシリーズ全体で調整されているため、おそらく古いコードをロードしているだけです。http://github.highcharts.com/rambera/highcharts.jsおよびhttp://github.highcharts.com/rambera/highcharts-more.jsから Highcharts を実行してみてください。

于 2013-02-08T08:30:10.983 に答える