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而不是身高。

文档说明高度和重量应以像素为单位，因此数字为

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

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

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

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

所以我无法回答你原来的问题，为什么图表会接受一个字符串是一个谜，当它被明确定义为需要一个数字时。

指定100％的宽度和高度会生成JavaScript错误

1 个答案: