指定100％的宽度和高度会生成JavaScript错误 [英] Specifying a width and height of 100% generates JavaScript errors

问题描述

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

  var options = {
 width：'100％'，
高度：'100％'，
 chartArea：{
高度：'100％'，
宽度：'100％'，
剩下：85，
 top：10，
 bottom：60，
 right：25 
}，
 legend：{position：'bottom'，alignment：'start'}，
 annotations ：{alwaysOutside：true}，
 hAxis：{
 gridlines：{count：10}，
}，
}; 
  

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

如下图所示，图表正确呈现，没有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'}，
注释：{alwaysOutside：true}，
 hAxis：{
 gridlines：{count：10}，
}，
}; 
  

重要的是，表示图表的div位于Bootstrap容器中。 HTML看起来如下：

 < div id =chart_divclass =col-xs-12 col-md- 6\" > 
< / div> 
  

解决方案

一个数字，但是你发送一个包含％符号的字符串，这就是NaN错误，它不是一个数字！

编辑

道歉，文件声明它可以是数字或字符串，我的猜测是它试图将其转换为字符串，并且％导致错误

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

chartArea.height

类型：数字或字符串
默认值：auto

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

编辑2

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

该文件指出身高和体重应该以像素为单位，所以一个数字

高度

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

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

宽度

图表的宽度，in像素。

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

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

I am attempting to render a Google bar chart. In my JavaScript, I have the following:

    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 },
        },
    };

When I execute this, I get the following JavaScript errors:

However, if I change the height from '100%' to '400' as shown below, the chart renders correctly with no JS errors.

    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 },
        },
    };

If it matters, the div that represents the chart is in a Bootstrap container. The HTML looks as follows:

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

解决方案

The issue is here that google chart width and height expect a number, but you are sending a string including the % symbol, this is what the NaN error is, its Not a Number!

EDIT

Apologies, the documents state it can be either a number or string, my guess is that it is trying to convert it to a string and the % causes the error

chartArea.width Type: number or string Default: auto

chartArea.height
Type: number or string Default: auto

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

Edit 2

I was actually looking at the chartArea.height and not height.

The documentation states that the height and weight should be in pixels, so a number

height
Height of the chart, in pixels.

Type: number Default: height of the containing element

width
Width of the chart, in pixels.

Type: number Default: width of the containing element

So I cant really answer your original question, why the chart will accept a string is a mystery, when it is clearly defined as requiring a number.

这篇关于指定100％的宽度和高度会生成JavaScript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！