如何为移动设备缩放堆积 google 图表？

Question

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

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

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方法用于将经典图表的选项转换为material图表。
但是绘制的图表是经典图表，所以没有必要使用convertOptions.

经典图表：google.visualization.BarChart
material 图表：google.charts.Bar

尝试删除该方法...

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

此外，'bar' 包用于加载 material 图表，
所以也不需要。

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

改为...

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

如果在这些变化之后，轴继续延伸超过最大值，
您可以手动设置轴范围。

我们可以找到行堆栈的最大值，然后四舍五入到最接近的 1000。

  var maxStack = null;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
    maxStack = maxStack || rowStack;
    maxStack = Math.max(maxStack, rowStack);
  }
  var maxRound = Math.ceil(maxStack / 1000) * 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 maxStack = null;
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
    maxStack = maxStack || rowStack;
    maxStack = Math.max(maxStack, rowStack);
  }
  var maxRound = Math.ceil(maxStack / 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>

如何为移动设备缩放堆积 google 图表？

How to scale stacked google chart for mobile?

html

javascript

charts

google-visualization

responsive