在同一页面上的多个图表上将vAxis设置为相同比例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在同一页面上的多个图表上将vAxis设置为相同比例相关的知识,希望对你有一定的参考价值。

我有一个html文档,显示从同一个Fusion Table查询的三个折线图。第一张图表是出生人数/年,另外两张是每年显示婚姻和死亡人数。

我想设置vAxis所以所有三个图表都具有0-35,000的相同比例。我尝试过在网上找到的多种解决方案,包括设置viewWindowMode最小/最大值和vAxis:ticks。每次我尝试设置其中一个图表都无法显示。

这是我目前工作的,但它显示的最大vAxis值是8K,我需要它是35K才能匹配具有最高值的图表。

  google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);

  function drawChart() {

    var query = "SELECT 'Year', 'Death' FROM 1_ZsP2sm6HteqyygtifQ0cIRKn00cA1GDeRu4KMEr WHERE 'Year_n' >= 1829 AND 'Year_n' <= 2012 ORDER BY 'Year'" ;

    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query(
        'https://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
      var chart = new google.charts.Line(
          document.getElementById('linechart_death'));

      chart.draw(response.getDataTable(), {
    chart: {title:'Records Per Year'},
    legend: {position:'none'},

    lineWidth: 100,
    colors: '#87BA41',
      });
    });
  }

  google.setOnLoadCallback(drawChart);

答案

Material Chart不支持几个配置选项, 见issues #: 2143

这包括...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
{hAxis,vAxis,hAxes.*,vAxes.*}.maxValue
{hAxis,vAxis,hAxes.*,vAxes.*}.viewWindowMode

为了使用这些选项,需要使用经典图表...


材料=来自google.charts.Linepackages: ['line']

来自google.visualization.LineChart的Classic = packages: ['corechart']


有一个选项可以让Classic图表看起来与Material类似......

theme: 'material'

以上是关于在同一页面上的多个图表上将vAxis设置为相同比例的主要内容,如果未能解决你的问题,请参考以下文章

在同一张图表上将 Pandas DataFrame 绘制为 Bar 和 Line

如何根据自动收缩的标签为多个标签设置相同的字体比例?

谷歌图表vAxis勾选多种颜色和相应的浅色背景

在页面上将 Highcharts 画布渲染为 PNG

AJAX调用会阻止导航到其他页面,直到完成为止

为多个图表设置相同的图例