如何为移动设备缩放堆叠的谷歌图表？

Question

我有一个堆叠图表，它根据此处提供的响应性解决方案对大多数屏幕尺寸做出响应： Google Charts - Responsive Issue - Dynamically Resize

问题是，尽管没有任何数据值高于 5000，但在移动设备上查看时，比例会上升到 10,000，并且整个图表变得难以辨认。 如何为移动设备正确缩放图表？

JSFIDDLE https://jsfiddle.net/385rzhsg

HTML

    <div id="chart"><div id="soc_chart"></div></div>

CSS

#chart {
  border: 1px solid #AAA;
  min-height: 1000px;
}

JAVASCRIPT

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

function drawStacked() {
      var data = google.visualization.arrayToDataTable([
        ['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
        ['SNAPDRAGON 870', 914, 3161],
        ['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
        ['SNAPDRAGON 845', 504, 2028],
        ['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
        ['MEDIATEK G95', 501, 1599],
        ['UNISOC TIGER T618', 392, 1441],
        ['UNISOC TIGER T310', 360, 708],
        ['MEDIATEK MT8176', 314, 644],
        ['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
        ['ROCKCHIP RK3399', 269, 615],
        ['BROADCOM BCM2711', 234, 672],
        ['ROCKCHIP RK3326', 86, 272],
        ['MEDIATEK MT6580A', 69, 227],
        ['ROCKCHIP RK3288', 10, 20]
]);


      var options = {
        chartArea: {'width': 'auto', 'height': '90%'},
        legend: 
            {'position':'top', 
            textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}},
        height: 1000,
        isStacked: true,
        hAxis: 
            {title: 'GEEKBENCH 5 SCORE', 
            textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false}, 
            titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}}, 
        series: {
            0:{color:'#F75200'},
            1:{color:'#940000'}},
        vAxis: 
            {title: 'SOC NAME', 
            textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
            titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}}
       };

    var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        window.addEventListener('resize', drawStacked, false);
}

Answer 1

首先，让我们看一下图表的选项。

var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));

convertOptions方法用于将经典图表的选项转换为材质图表。
但是正在绘制的图表是经典图表，因此无需使用convertOptions 。

经典图表： google.visualization.BarChart
材质图表： google.charts.Bar

尝试删除该方法...

var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, options);

此外， 'bar' package 用于加载材料图表，
所以也不需要。

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

改成...

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

如果在这些更改之后，轴继续超出最大值，
您可以手动设置轴范围。

我们可以使用数据表方法getColumnRange来查找数据中的最大值。

var axisRange1 = data.getColumnRange(1);  // range for series 1
var axisRange2 = data.getColumnRange(2);  // range for series 2
var maxRange = Math.max(axisRange1.max, axisRange2.max);  // max from both series
var maxRound = Math.round(maxRange / 1000) * 1000;  // round max to nearest 1000

然后使用该值设置轴的最大值。

    hAxis: {
      title: 'GEEKBENCH 5 SCORE',
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
      titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
      viewWindow: {
        min: 0,
        max: maxRound  // set max value of axis
      }

请参阅以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'], ['SNAPDRAGON 870', 914, 3161], ['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203], ['SNAPDRAGON 845', 504, 2028], ['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695], ['MEDIATEK G95', 501, 1599], ['UNISOC TIGER T618', 392, 1441], ['UNISOC TIGER T310', 360, 708], ['MEDIATEK MT8176', 314, 644], ['MEDIATEK HELIO P60 (MT6771)', 288, 1272], ['ROCKCHIP RK3399', 269, 615], ['BROADCOM BCM2711', 234, 672], ['ROCKCHIP RK3326', 86, 272], ['MEDIATEK MT6580A', 69, 227], ['ROCKCHIP RK3288', 10, 20] ]); var axisRange1 = data.getColumnRange(1); var axisRange2 = data.getColumnRange(2); var maxRange = Math.max(axisRange1.max, axisRange2.max); var maxRound = Math.round(maxRange / 1000) * 1000; var options = { chartArea: {'width': 'auto', 'height': '90%'}, legend: { position: 'top', textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false} }, height: 1000, isStacked: true, hAxis: { title: 'GEEKBENCH 5 SCORE', textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false}, titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}, viewWindow: { min: 0, max: maxRound } }, series: { 0:{color:'#F75200'}, 1:{color:'#940000'} }, vAxis: { title: 'SOC NAME', textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false}, titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false} } }; var chart = new google.visualization.BarChart(document.getElementById('soc_chart')); chart.draw(data, options); window.addEventListener('resize', function () { chart.draw(data, options); }); });

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