Specifying a width and height of 100% generates JavaScript errors

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/49902149/specifying-a-width-and-height-of-100-generates-javascript-errors

标签

javascript

charts

google-visualization