指定宽度和高度为100％会产生JavaScript错误

Question

我正在尝试绘制Google条形图。 在我的JavaScript中，我具有以下内容：

    var options = {
        width: '100%',
        height: '100%',
        chartArea: {
            height: '100%',
            width: '100%',
            left: 85,
            top: 10,
            bottom: 60,
            right: 25
        },
        legend: { position: 'bottom', alignment: 'start' },
        annotations: { alwaysOutside: true},
        hAxis: {
            gridlines: { count: 10 },
        },
    };

执行此操作时，出现以下JavaScript错误：

但是，如果我将高度从“ 100％”更改为“ 400”，如下所示，则图表将正确呈现，没有JS错误。

    var options = {
        width: '100%',
        height: '400',
        chartArea: {
            height: '100%',
            width: '100%',
            left: 85,
            top: 10,
            bottom: 60,
            right: 25
        },
        legend: { position: 'bottom', alignment: 'start' },
        annotations: { alwaysOutside: true},
        hAxis: {
            gridlines: { count: 10 },
        },
    };

如果重要的话，代表图表的div位于Bootstrap容器中。 HTML如下所示：

    <div id="chart_div" class="col-xs-12 col-md-6">
    </div>

Answer 1

问题出在这里，谷歌图表的宽度和高度期望有一个数字，但是您正在发送一个包含％符号的字符串，这就是NaN错误，它不是数字！

编辑

抱歉，文档指出它可以是数字或字符串，我的猜测是它正在尝试将其转换为字符串，并且％导致错误

chartArea.width类型：数字或字符串默认值：自动

chartArea.height
类型：数字或字符串默认：自动

https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options

编辑2

我实际上是在看chartArea.height而不是height。

文档指出高度和重量应以像素为单位，因此

高度
图表的高度，以像素为单位。

类型：数字默认值：包含元素的高度

宽度
图表的宽度，以像素为单位。

类型：数字默认值：包含元素的宽度

因此，我不能真正回答您的原始问题，当图表明确定义为需要数字时，为什么图表会接受字符串是一个谜。