[英]How can I create a Butterfly(Diverging) chart using google charts
I would like to have the same chart with the values on the left side like 6.7, 14.95, 21.65, instead of the negative values.我想有相同的图表,左侧的值为 6.7、14.95、21.65,而不是负值。 In the google charts documentation there is nothing similar, I looked for several examples but I can't find anything like google charts, only with other api's.在谷歌图表文档中没有类似的东西,我找了几个例子,但我找不到像谷歌图表这样的东西,只有其他 api。 Is it possible to get a chart like this with google charts?有没有可能用谷歌图表得到这样的图表?
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>
we can use object notation to provide both the value v:
and the formatted f:
value我们可以使用 object 表示法来提供值v:
和格式化的f:
值
{v: -6.7, f: '6.7'}
this allows the value to plot correctly, and the tooltip to display a positive number.这允许 plot 的值正确,并且工具提示显示正数。
we can also do the same with the x-axis ticks...我们也可以对 x 轴刻度做同样的事情......
hAxis: {
format: ';',
ticks: [{v: -30, f: '30'}, {v: -20, f: '20'}, {v: -10, f: '10'}, 0, 10, 20, 30]
},
see following working snippet...请参阅以下工作片段...
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.