0

私はバブルチャートを作成しましたが、ラベルの再配置には苦労しています。Googleバブルチャートのラベル

Bubble Chart

私は、彼らが気泡を重複しないようにラベルを再配置する探しています。どのように私がこれを実装するかもしれないかについて、私はどんな提案も歓迎します。

事前に感謝します。

これは私が持っているコードです:

google.charts.load('current', { 
    'packages': ['corechart'] 
}); 
google.charts.setOnLoadCallback(drawSeriesChart); 


function drawSeriesChart() { 


    var data = google.visualization.arrayToDataTable([ 
    ['ID', 'Actionability (100)', 'Likelihood (100)', 'Megatrend', 'Impact (50)'], 
    ['Income eqality', -40, -10, 'Megacities', 50], 
    ['Pressure on cities', 80, 53, 'Megacities', 50], 
    ['Rise of local gov', 70, 60, 'Megacities', 40], 
    ['Focus on quality of life', 50, 30, 'Megacities', 40], 
    ['Focus on education', -40, -40, 'Megacities', 33], 
    ['City as cultural hub', -70, -27, 'Megacities', 32], 
    ['Backlash vs erosion of values', -75, -25, 'Megacities', 40], 
    ['Gateway drugs', -80, 50, 'Megacities', 33], 
    ['Affordable connectivity', 75, 80, 'Connected communities', 50], 
    ['Smart machines', 15, 63, 'Connected communities', 35], 
    ['Mobile money standard', 70, 10, 'Connected communities', 40], 
    ['High yielding african tech', 68, 45, 'Connected communities', 40], 
    ['Telecoms giants', -30, 60, 'Connected communities', 40], 
    ['Affordable access to power', 40, 40, 'Connected communities', 37], 
    ['Drones', 25, 10, 'Connected communities', 35], 
    ['Sharing economy', 10, 60, 'Connected communities', 38], 
    ['Sales adopt traditional market', -90, -35, 'Connected communities', 34], 
    ['Import substitution', -30, 35, 'The savvy consumer', 40], 
    ['Low cost aerial cargo', 30, 35, 'The savvy consumer', 33], 
    ['Hybrid financing', -70, 32, 'The savvy consumer', 33], 
    ['Experience value', 40, 10, 'The savvy consumer', 35], 
    ['Local artist influence', -20, 10, 'The savvy consumer', 35], 
    ['Preference for young African brands', 50, 48, 'The savvy consumer', 45], 
    ['Cut out middleman', 60, 25, 'The savvy consumer', 45], 
    ['Manufacturing growth', 40, 75, 'Diversification drive', 45], 
    ['SME formalisation', -20, 65, 'Diversification drive', 45], 
    ['New business adopts formalised economics', -20, 45, 'Diversification drive', 45], 
    ['Pressure to resist mechanisation', -60, 10, 'Diversification drive', 33], 
    ['Greater role in backward integration', -50, 40, 'Diversification drive', 33], 
    ['Industrialise vs protect ecosystems', -80, 60, 'Diversification drive', 40], 
    ['Women-led business', 10, 50, 'Female first', 33], 
    ['Women access to finance', 10, 46, 'Female first', 37], 
    ['Dual income households rising', 60, 56, 'Female first', 33], 
    ['Tech for women', 20, 26, 'Female first', 33], 
    ['Greater role for women', 15, 30, 'Female first', 33], 
    ['Target illicit financial flows', 5, 5, 'Sustainable solutions', 33], 
    ['Impact reporting growth', 65, 40, 'Sustainable solutions', 39], 
    ['New business models for social challenges', 45, 60, 'Sustainable solutions', 39], 
    ['Sustainable finance models', -10, 60, 'Sustainable solutions', 33], 
    ['Citizens voicing themselves', -80, 55, 'Sustainable solutions', 33], 
    ['Health & education priority', 35, 55, 'Sustainable solutions', 38], 
    ['Sustainability driven companies', 45, 52, 'Sustainable solutions', 36] 
    ]); 


    var options = { 
    title: 'Diageo Futures - Sub-trend matrix', 
    hAxis: { 
     title: 'Actionability' 
    }, 
    hAxis: { 
     maxValue: '120' 
    }, 
    hAxis: { 
     textposition: 'in' 
    }, 
    hAxis: { 
     gridlines: { 
     color: 'white' 
     } 
    }, 
    theme: 'maximized', 
    axisTitlesPosition: 'in', 
    vAxis: { 
     title: 'Likelihood' 
    }, 
    vAxis: { 
     maxValue: '170' 
    }, 
    vAxis: { 
     gridlines: { 
     color: 'white' 
     } 
    }, 
    bubble: { 
     textStyle: { 
     fontSize: 10, 
     fontName: 'arial', 
     auraColor: 'none' 
     } 
    } 
    }; 


    var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div')); 
    chart.draw(data, options); 
} 

答えて

0

ラベルの配置のための無標準オプション

が、'ready'イベントが発生

が作業スニペットを次のように表示いったんラベルは、手動で操作することができます...

google.charts.load('current', { 
 
    callback: drawSeriesChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawSeriesChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['ID', 'Actionability (100)', 'Likelihood (100)', 'Megatrend', 'Impact (50)'], 
 
    ['Income eqality', -40, -10, 'Megacities', 50], 
 
    ['Pressure on cities', 80, 53, 'Megacities', 50], 
 
    ['Rise of local gov', 70, 60, 'Megacities', 40], 
 
    ['Focus on quality of life', 50, 30, 'Megacities', 40], 
 
    ['Focus on education', -40, -40, 'Megacities', 33], 
 
    ['City as cultural hub', -70, -27, 'Megacities', 32], 
 
    ['Backlash vs erosion of values', -75, -25, 'Megacities', 40], 
 
    ['Gateway drugs', -80, 50, 'Megacities', 33], 
 
    ['Affordable connectivity', 75, 80, 'Connected communities', 50], 
 
    ['Smart machines', 15, 63, 'Connected communities', 35], 
 
    ['Mobile money standard', 70, 10, 'Connected communities', 40], 
 
    ['High yielding african tech', 68, 45, 'Connected communities', 40], 
 
    ['Telecoms giants', -30, 60, 'Connected communities', 40], 
 
    ['Affordable access to power', 40, 40, 'Connected communities', 37], 
 
    ['Drones', 25, 10, 'Connected communities', 35], 
 
    ['Sharing economy', 10, 60, 'Connected communities', 38], 
 
    ['Sales adopt traditional market', -90, -35, 'Connected communities', 34], 
 
    ['Import substitution', -30, 35, 'The savvy consumer', 40], 
 
    ['Low cost aerial cargo', 30, 35, 'The savvy consumer', 33], 
 
    ['Hybrid financing', -70, 32, 'The savvy consumer', 33], 
 
    ['Experience value', 40, 10, 'The savvy consumer', 35], 
 
    ['Local artist influence', -20, 10, 'The savvy consumer', 35], 
 
    ['Preference for young African brands', 50, 48, 'The savvy consumer', 45], 
 
    ['Cut out middleman', 60, 25, 'The savvy consumer', 45], 
 
    ['Manufacturing growth', 40, 75, 'Diversification drive', 45], 
 
    ['SME formalisation', -20, 65, 'Diversification drive', 45], 
 
    ['New business adopts formalised economics', -20, 45, 'Diversification drive', 45], 
 
    ['Pressure to resist mechanisation', -60, 10, 'Diversification drive', 33], 
 
    ['Greater role in backward integration', -50, 40, 'Diversification drive', 33], 
 
    ['Industrialise vs protect ecosystems', -80, 60, 'Diversification drive', 40], 
 
    ['Women-led business', 10, 50, 'Female first', 33], 
 
    ['Women access to finance', 10, 46, 'Female first', 37], 
 
    ['Dual income households rising', 60, 56, 'Female first', 33], 
 
    ['Tech for women', 20, 26, 'Female first', 33], 
 
    ['Greater role for women', 15, 30, 'Female first', 33], 
 
    ['Target illicit financial flows', 5, 5, 'Sustainable solutions', 33], 
 
    ['Impact reporting growth', 65, 40, 'Sustainable solutions', 39], 
 
    ['New business models for social challenges', 45, 60, 'Sustainable solutions', 39], 
 
    ['Sustainable finance models', -10, 60, 'Sustainable solutions', 33], 
 
    ['Citizens voicing themselves', -80, 55, 'Sustainable solutions', 33], 
 
    ['Health & education priority', 35, 55, 'Sustainable solutions', 38], 
 
    ['Sustainability driven companies', 45, 52, 'Sustainable solutions', 36] 
 
    ]); 
 

 

 
    var options = { 
 
    axisTitlesPosition: 'in', 
 
    bubble: { 
 
     textStyle: { 
 
     fontSize: 10, 
 
     fontName: 'Arial', 
 
     auraColor: 'none' 
 
     } 
 
    }, 
 
    hAxis: { 
 
     gridlines: { 
 
     color: 'white' 
 
     }, 
 
     maxValue: 120, 
 
     textposition: 'in', 
 
     title: 'Actionability' 
 
    }, 
 
    height: 400, 
 
    theme: 'maximized', 
 
    title: 'Diageo Futures - Sub-trend matrix', 
 
    vAxis: { 
 
     gridlines: { 
 
     color: 'white' 
 
     }, 
 
     maxValue: 170, 
 
     title: 'Likelihood' 
 
    } 
 
    }; 
 

 

 
    var container = document.getElementById('series_chart_div'); 
 
    var chart = new google.visualization.BubbleChart(container); 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) { 
 
     if (text.getAttribute('text-anchor') === 'middle') { 
 
     var adjY = ((index % 2) === 0) ? -1 : 1; 
 
     text.setAttribute('y', parseFloat(text.getAttribute('y')) + (adjY * 8)); 
 
     } 
 
    }); 
 
    }); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="series_chart_div"></div>
また

は、一つのオブジェクトに含まれるべきであるvAxis & hAxisのオプションは、複数ではない...

例えば(そしてmaxValue文字列対数値であるべきです)

hAxis: { 
    gridlines: { 
    color: 'white' 
    }, 
    maxValue: 120, 
    textposition: 'in', 
    title: 'Actionability' 
}, 

hAxis: { 
    title: 'Actionability' 
}, 
hAxis: { 
    maxValue: '120' 
}, 
hAxis: { 
    textposition: 'in' 
}, 
hAxis: { 
    gridlines: { 
    color: 'white' 
    } 
}, 
関連する問題