Question

我得到了这个组合图，它不想做我想做的事情，缩放总是总是100，这是代码：

<script type="text/javascript">
google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['kleur', 'rood', 'geel', 'groen', 'blauw', 'lijn'],
        ['Rood - Geel - Groen - Blauw', 57.5, 70, 60, 50, 50],
    ]);

    var options = {
        title: 'AANGEPAST',
        width: 350,
        height: 600,
        bar: {
            groupWidth: '95%'
        },
        colors: ['red', 'yellow', 'green', 'blue', 'red'],
        bar: {
            groupWidth: '95%'
        },
        legend: {
            position: 'none'
        },
        seriesType: 'bars',
        vAxis: {
            viewWindowMode: 'explicit',
            viewWindow: {
                max: 100,
                min: 0
            }
        },
        vAxis: {
            minValue: 0
        },
        series: {
            0: {
                dataOpacity: 0.8
            },
            1: {
                dataOpacity: 0.8
            },
            2: {
                dataOpacity: 0.8
            },
            3: {
                dataOpacity: 0.8
            },
            4: {
                type: "steppedArea",
                color: '#FF0000',
                visibleInLegend: false,
                areaOpacity: 0,
            }
        },
        vAxes: [{},
            {
                ticks: [1],
                baseline: 50
            }
        ]
    };

    var chart = new google.visualization.ComboChart(document.getElementById('aangepast'));
    chart.draw(data, options);
}

这从0缩放到80，我希望将其缩放到100，这就是为什么viewWindowMode是显式的，且最大值为100，最小值为0，但是那是行不通的，任何人都可以看到问题在哪里吗？

位于https://developers.google.com/chart/interactive/docs/gallery/combochart的文档

Answer 1

vAxis

有两个选项

vAxis: {
  viewWindowMode: 'explicit',
  viewWindow: {
    max: 100,
    min: 0
  }
},
vAxis: {
  minValue: 0
},

第二个（没有max的值）正在覆盖第一个

每个选项只能有一个实例

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

google.charts.load('current', {
  packages: ['corechart']
}).then(drawVisualization);

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['kleur', 'rood', 'geel', 'groen', 'blauw', 'lijn'],
    ['Rood - Geel - Groen - Blauw', 57.5, 70, 60, 50, 50],
  ]);

  var options = {
    title: 'AANGEPAST',
    width: 350,
    height: 600,
    bar: {
      groupWidth: '95%'
    },
    colors: ['red', 'yellow', 'green', 'blue', 'red'],
    bar: {
      groupWidth: '95%'
    },
    legend: {
      position: 'none'
    },
    seriesType: 'bars',
    vAxis: {
      viewWindowMode: 'explicit',
      viewWindow: {
        max: 100,
        min: 0
      }
    },
    series: {
      0: {
        dataOpacity: 0.8
      },
      1: {
        dataOpacity: 0.8
      },
      2: {
        dataOpacity: 0.8
      },
      3: {
        dataOpacity: 0.8
      },
      4: {
        type: "steppedArea",
        color: '#FF0000',
        visibleInLegend: false,
        areaOpacity: 0,
      }
    },
    vAxes: [{},
      {
        ticks: [1],
        baseline: 50
      }
    ]
  };

  var chart = new google.visualization.ComboChart(document.getElementById('aangepast'));
  chart.draw(data, options);
}

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

谷歌图表视图窗口模式显式

1 个答案: