javascript - Google Visualization - vAxis maxValue 属性不起作用-6ren

javascript - Google Visualization - vAxis maxValue 属性不起作用

转载作者：行者123 更新时间：2023-11-29 10:07:25

出于我完全无法理解的原因，我无法使 vAxis 的 maxValue 属性起作用:

var options = { vAxis: { maxValue: .85 } }

vAxis 是一个范围为 0 到 100% 的百分比，我想通过将最大值设置为 85% 来节省一些空间。我认为这与这个项目在 7 个 DataSources 和 4 个 ChartTypes 之间切换有关，因为我在制作单个图表时从未遇到过这个问题。

以下代码段是一个简化案例，其中包含可能与该问题相关的最少功能。感谢您投入时间和精力。

片段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>G04B32</title>
  <link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    *,
    *:before,
    *:after {
      font-style: normal !important;
    }
    body {
      position: relative;
    }
    form {
      background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png);
      background-color: #333;
    }
    #ii {
      margin-top: 80px
    }
    .panel {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    #chart {
      height: 70vh; width: 96vw; background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png); background-size: cover; background-repeat: no-repeat; }
      .group.group: after, .chart.chart: after, .root.root: after {
        color: #333;
      }
      div.google-visualization-tooltip {
        background-color: rgba(0, 0, 0, .6);
        border-radius: 6px;
        min-width: 325px;
        max-height: 75px;
      }
      div.google-visualization-tooltip > ul > li {
        display: table-cell;
        margin: 0 5px;
      }
      div.google-visualization-tooltip > ul > li > span {
        color: gold;
      }
      #groupOpt.off {
        display: none;
      }
      #groupOpt.on {
        display: block;
      }
  </style>
</head>

<body class='sl'>
<!--THIS SECTION WAS REMOVED-->
  <section id="ii">
    <h1>Sources</h1>
    <figure id='chart'></figure>
  </section>
  <footer></footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      packages: ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    var options = {
      backgroundColor: {
        fill: 'transparent'
      },
      tooltip: {
        textStyle: {
          color: 'gold',
          fontSize: 16,
          fontName: 'Verdana'
        },
        trigger: 'focus',
        isHtml: true
      },
      animation: {
        startup: true,
        duration: 1000,
        easing: 'out'
      },
      title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
      titleTextStyle: {
        color: 'gold',
        fontName: 'Open Sans',
        fontSize: 22
      },
      hAxis: {
        textStyle: {
          color: 'cyan'
        },
        title: 'Year',
        titleTextStyle: {
          color: 'gold',
          fontName: 'Open Sans',
          fontSize: 22
        },
        format: '####',
        slantedText: true
      },
      vAxis: {
        maxValue: .85,// <<<<<<<<<<<<<<<<<<<<<DOESN'T WORK>>>>>>
        format: '#%',
        textStyle: {
          fontName: 'Open Sans',
          color: 'cyan'
        },
        title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
        titleTextStyle: {
          color: 'gold',
          fontName: 'Arial',
          fontSize: 16
        }

      },
      
      legend: {
        textStyle: {
          color: 'white',
          fontName: 'Verdana'
        },
        position: 'bottom'
      },

      crosshair: {
        trigger: 'both',
        orientation: 'both',
        focused: {
          color: 'gold',
          opacity: .7
        },
        selected: {
          color: 'cyan',
          opacity: .7
        }
      },
      pointSize: 12,
      theme: 'materials',
      chartArea: {
        left: 100,
        top: 75,
        width: '90%',
        height: '60%'
      }

    }

    var chart;
    var main;
    var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
    var qArray = [DATA REMOVED];

    function drawChart() {
      chart = new google.visualization.ChartWrapper();
      chart.setDataSourceUrl(qArray[0]);
      chart.setChartType(cArray[0]);
      chart.setContainerId('chart');
      chart.setOptions(options);
      chart.draw();
    }

    function alterChart(C, Q) {

      C = Number(C);
      Q = Number(Q);
      var URL = qArray[Q];
      var VIS = cArray[C];

      main = new google.visualization.ChartWrapper();
      main.setDataSourceUrl(URL);
      main.setChartType(VIS);
      main.setContainerId('chart');
      main.setOptions(options);
      main.draw();
    }

    $('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
      var chartSel = $("input[name='chart']:checked").val();
      var groupSel = $("input.chx:checked").val();
      if (e.target !== e.currentTarget) {
        var target = e.target.id;
        var status = $("input[name='root']:checked").attr('id');
      }

      if (target === 'root0' && status === 'root0') {
        $('#groupOpt').slideUp().removeClass('on').addClass('off');
        return alterChart(chartSel, groupSel);
      }
      if (target === 'root1' && status === 'root1') {
        $('#groupOpt').slideDown().addClass('on').removeClass('off');
        return alterChart(chartSel, groupSel);
      }

  <!--THIS PART REMOVED-->
    }
  </script>
  <!--<script src='gvis-api.js'></script>-->
</body>

</html>

最佳答案

你可以覆盖--> vAxis.viewWindow.max

  vAxis: {
      viewWindow: {
          max: 0.85
      }
      ...

此外，vAxis.maxValue 仅适用于 continuous axis ...

关于javascript - Google Visualization - vAxis maxValue 属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40547082/

文章推荐： mysql - 使用 TIME 列类型的 DATE_ADD() 使记录过期

文章推荐： javascript - Protractor :如何获取当前的浏览器宽度？

文章推荐： javascript - D3 如何从 0 以外的值开始我的 y 轴

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Google Visualization - vAxis maxValue 属性不起作用

片段