Блог

Главная - Вопросы по программированию - проблема с размером диаграммы Google

проблема с размером диаграммы Google

#css #charts #google-visualization

#css #Диаграммы #google-визуализация

Вопрос:

На одной странице отображается несколько диаграмм, у некоторых пользователей экран большего размера, а у некоторых стандартный экран маленького размера.

Есть ли какой-либо способ иметь гибкую ширину, чтобы она могла поместиться на экране монитора любого размера.

Я попытался установить ширину на 100%, но это не сработало.

 <table width="100%">
<tr>
<td>
    <div id="chart_GP" class="chart_div">
        <div class="chart_preloader">amp;nbsp;</div>
    </div>
</td>
<td id="td_profit">
    <div id="chart_Profit" class="chart_div">
            <div class="chart_preloader">amp;nbsp;</div>
    </div>
</td>

<td>
    <div id="chart_Visits" class="chart_div">
        <div class="chart_preloader">amp;nbsp;</div>
    </div>
</td>
</tr>
</table>

CSS

 .chart_preloader {
  height:250px; 
  width: 100%; 
  background:url('/images/pie.gif') center center no-repeat;
  background-color : #EEF;
}

.chart_div {
  border-color: #006699; 
  border-style: solid; 
  border-width: 1px;
}

Параметры диаграммы Google

 var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: chart_background_Color,
        colors: [chartLine_Color],
        legend: 'none',
        width: 385,
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#'%''
        }
    };

введите описание изображения здесь

Ответ №1:

рекомендуем не указывать параметры ширины в параметрах диаграммы и использовать макет css
, которому будет соответствовать диаграмма

редко используйте таблицы, поэтому зависит от макета, который вы ищете, ниже приведен один пример

чтобы сделать диаграмму адаптивной, перерисуйте диаграмму при изменении размера окна…

 google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],
      [new Date(2015, 0, 14), 3],
      [new Date(2015, 0, 21), 2],
      [new Date(2015, 0, 28), 8]
    ]);

    var options = {
        title: "Last 12 Months Gross Profit per Month",
        animation: {
            duration: 1500,
            startup: true //This is the new option
        },
        pointSize: 5,
        curveType: 'function',
        backgroundColor: 'cyan',
        colors: ['red'],
        legend: 'none',
        height: 250,
        tooltip: { isHtml: true },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            title: 'Profit',
            titleTextStyle: { italic: false, fontName: 'Calibri', fontSize: '12', bold: 'false' }
            //format: '#'%''
        }
    };

    var chart1 = new google.visualization.LineChart(document.getElementById('chart_GP'));
    drawChart(chart1);
    var chart2 = new google.visualization.LineChart(document.getElementById('chart_Profit'));
    drawChart(chart2);
    var chart3 = new google.visualization.LineChart(document.getElementById('chart_Visits'));
    drawChart(chart3);

    // make chart responsive
    window.addEventListener('resize', function () {
      drawChart(chart1);
      drawChart(chart2);
      drawChart(chart3);
    }, false);

    function drawChart(chart) {
      chart.draw(data, options);
    }
  },
  packages:['corechart']
});  
 .chart_preloader {
  height:250px;
  width: 100%;
  background:url('/images/pie.gif') center center no-repeat;
  background-color : #EEF;
}

.dashboard {
  text-align: center;
}

#chart_GP {
  float: left;
}

#chart_Profit {
  display: inline-block;
}

#chart_Visits {
  float: right;
}

.chart_div {
  border-color: #006699;
  border-style: solid;
  border-width: 1px;
  width: 32%;
}  
 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
    <div id="chart_GP" class="chart_div">
        <div class="chart_preloader">amp;nbsp;</div>
    </div>
    <div id="chart_Profit" class="chart_div">
            <div class="chart_preloader">amp;nbsp;</div>
    </div>
    <div id="chart_Visits" class="chart_div">
        <div class="chart_preloader">amp;nbsp;</div>
    </div>
</div>

Комментарии:

1. как я уже упоминал в своем вопросе, width 100% не работает. Не могли бы вы предоставить фрагмент с несколькими диаграммами

2. Я думаю, вы неправильно поняли мой вопрос, я не смотрю на отзывчивую сторону, я хочу, чтобы диаграмма рисовалась на мониторе любого размера при первой загрузке.

3. пропустил это, но да, это возможно — измененный ответ выше