关于javascript:google图表视图窗口模式显式

google chart view window mode explicit

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<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

的文档


vAxis

有两个选项

1
2
3
4
5
6
7
8
9
10
vAxis: {
  viewWindowMode: 'explicit',
  viewWindow: {
    max: 100,
    min: 0
  }
},
vAxis: {
  minValue: 0
},

第二个没有最大值的值,将覆盖第一个

每个选项只能有一个实例

请参阅以下工作摘要...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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);
}
1
<script src="https://www.gstatic.com/charts/loader.js">