Подтвердить что ты не робот

Область диаграммы Google Area и установка полной ширины

Я пытаюсь создать стиль и добавить еще 2 x'axis в диаграмму области Google (a и b на изображении). Например, ось a должна быть установлена ​​равной 900 и b: 700.

Также пытаемся расширить диаграмму до полной ширины содержащего div (960px), но мое решение, похоже, ничего не делает.

This is the desired effect Это желаемый эффект.

Текущий js

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
            ['November',  1000,      400],
            ['December',  1170,      460],
            ['January',  660,       1120],
            ['February',  690,       1120],
            ['March',  780,       1120],
            ['April',  820,       1120],
            ['May',  660,       1120],
            ['June',  1030,      540]
    ]);

    var options = {
      title: '',
      backgroundColor: 'none',
      width:'960',
      legend: {position: 'none'},
      hAxis: {title: 'Year',  titleTextStyle: {color: 'grey'},
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы получить правильную ширину диаграммы, добавьте определение chartArea к вашему объекту options. Настройки chartArea перечислены в AreaChart документации в разделе "Параметры конфигурации":

chartArea: {
    left: 40,
    top: 10,
    width: 900,
    height: 350
}

Демо: http://jsfiddle.net/2H7sp/

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['November', 1000, 400],
        ['December', 1170, 460],
        ['January', 660, 1120],
        ['February', 690, 1120],
        ['March', 780, 1120],
        ['April', 820, 1120],
        ['May', 660, 1120],
        ['June', 1030, 540]
    ]);

    var options = {
        title: '',
        backgroundColor: 'none',
        legend: { position: 'none' },
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'grey'
            }
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>