如何使用 google 图表创建蝶形（发散）图表

Question

我想要相同的图表，左侧的值是 6.7、14.95、21.65，而不是负值。在 google 图表文档中没有类似的东西，我找了几个例子，但我找不到任何类似 google 图表的东西，只有其他 api 的。 google 图表可以得到这样的图表吗？

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>

如何使用 google 图表创建蝶形（发散）图表

How can I create a Butterfly(Diverging) chart using google charts

javascript

charts

google-visualization