如何使用谷歌圖表創建蝴蝶（發散）圖表

Question

我想有相同的圖表，左側的值為 6.7、14.95、21.65，而不是負值。 在谷歌圖表文檔中沒有類似的東西，我找了幾個例子，但我找不到像谷歌圖表這樣的東西，只有其他 api。 有沒有可能用谷歌圖表得到這樣的圖表？

 google.charts.load('current', { packages:['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ [' ', 'Most Liked', { role: 'style' }, { role: 'annotation' }, 'Most Disliked', { role: 'style' }, { role: 'annotation' }], [' ', 5.30, '#599906', 'lable2', -6.7, '#c91e1e', 'lable3'], [' ', 16.94, '#599906', 'Food', -14.94, '#c91e1e', 'Clealines'], [' ', 20.49, '#599906', 'service', -21.65, '#c91e1e', 'Ambiance'], ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, 3, 4, 5, 6]); /* columns in data table*/ var options = { chartArea: { left: "3%", top: "10%", width: "94%" }, bar: { groupWidth: "95%" }, legend: { position: "none" }, isStacked: true, /* value responsible for making the normal bar chart as butterfly chart */ hAxis: { format: ';', }, vAxis: { direction: -1 /* value responsible for inverse the bar chart from desending to accending order */ }, animation: { duration: 1000, easing: 'out', startup: true }, annotations: { /* text decoration for labels */ textStyle: { fontSize: 13, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; var chart = new google.visualization.BarChart(document.getElementById('barchart_values')); chart.draw(view, options); });

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="barchart_values"></div>

Answer 1

我們可以使用 object 表示法來提供值v:和格式化的f:值

{v: -6.7, f: '6.7'}

這允許 plot 的值正確，並且工具提示顯示正數。

我們也可以對 x 軸刻度做同樣的事情......

hAxis: {
  format: ';',
  ticks: [{v: -30, f: '30'}, {v: -20, f: '20'}, {v: -10, f: '10'}, 0, 10, 20, 30]
},

請參閱以下工作片段...

 google.charts.load('current', { packages:['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ [' ', 'Most Liked', { role: 'style' }, { role: 'annotation' }, 'Most Disliked', { role: 'style' }, { role: 'annotation' }], [' ', 5.30, '#599906', 'lable2', {v: -6.7, f: '6.7'}, '#c91e1e', 'lable3'], [' ', 16.94, '#599906', 'Food', {v: -14.94, f: '14.94'}, '#c91e1e', 'Clealines'], [' ', 20.49, '#599906', 'service', {v: -21.65, f: '21.65'}, '#c91e1e', 'Ambiance'], ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, 3, 4, 5, 6]); /* columns in data table*/ var options = { chartArea: { left: "3%", top: "10%", width: "94%" }, bar: { groupWidth: "95%" }, legend: { position: "none" }, isStacked: true, /* value responsible for making the normal bar chart as butterfly chart */ hAxis: { format: ';', ticks: [{v: -30, f: '30'}, {v: -20, f: '20'}, {v: -10, f: '10'}, 0, 10, 20, 30] }, vAxis: { direction: -1 /* value responsible for inverse the bar chart from desending to accending order */ }, animation: { duration: 1000, easing: 'out', startup: true }, annotations: { /* text decoration for labels */ textStyle: { fontSize: 13, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; var chart = new google.visualization.BarChart(document.getElementById('barchart_values')); chart.draw(view, options); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="barchart_values"></div>