如何使用google图表创建蝶形图（背离）？

Question

我希望有同样的图表，左边的值是6.7，14.95，21.65，而不是负值。在google charts文档中没有类似的东西，我找了几个例子，但我找不到任何类似google charts的东西，只有其他api的。有可能用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>

Answer 1

我们可以使用对象符号来提供这两个值。v: 和格式化的 f: 价值

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

这样就可以正确地绘制数值，并使工具提示显示一个正数。

我们也可以对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>