Круговая диаграмма на JS

Пример:

Статистика посетителей по возрасту за год:

HTML:

Во избежании проблем с адаптивностью, заголовок лучше написать в HTML, а не через настройку title в JS диаграммы

<p>Статистика посетителей по возрасту за год:</p>
<div id="chart"></div>

1 2	<p>Статистика посетителей по возрасту за год:</p> <div id="chart"></div>

JS:

Подключаем скрипт графиков с Google:

<script src="https://www.gstatic.com/charts/loader.js"></script>

1	<script src="https://www.gstatic.com/charts/loader.js"></script>

И код самой диаграммы:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Age');
	data.addColumn('number', 'People');
	data.addRows([
		['младше 18 лет', 12676],
		['18‑24 года', 76669],
		['25‑34 года', 118736],
		['35‑44 года', 63857],
		['45-54 года', 28459],
		['55 лет и старше', 10846],		  
	]);
	var options = {
		slices: { 
			3: {offset: 0.1}
		},
		legend: {
			textStyle: {color: '#000'}
		}, 
		backgroundColor: "transparent",
		chartArea: {
			width: '90%', 
			height: '90%'
		},
		//colors: ['#3379b7', '#4f93ce', '#87b5de', '#0063ba', '#357fbf', '#23547f'],
		is3D: true
	};
	var chart = new google.visualization.PieChart(document.getElementById('chart'));
	chart.draw(data, options);
}

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Age');

data.addColumn('number', 'People');

data.addRows([

['младше 18 лет', 12676],

['18‑24 года', 76669],

['25‑34 года', 118736],

['35‑44 года', 63857],

['45-54 года', 28459],

['55 лет и старше', 10846],

]);

var options = {

slices: {

3: {offset: 0.1}

legend: {

textStyle: {color: '#000'}

backgroundColor: "transparent",

chartArea: {

width: '90%',

height: '90%'

//colors: ['#3379b7', '#4f93ce', '#87b5de', '#0063ba', '#357fbf', '#23547f'],

is3D: true

};

var chart = new google.visualization.PieChart(document.getElementById('chart'));

chart.draw(data, options);

}

Описание всех настроек можно посмотреть на сайте разработчиков developers.google.com

CSS:

Чтобы диаграмма вписывалась во все экраны, размер ее задаем высотой через CSS.

Также пофиксим глюк с дерганием всплывающей подсказки, когда она появляется при заходе курсора, пропадает, когда он оказывается на ней, и снова появляется.

#chart {
	height: 450px;
}
@media (max-width:767px) {
	#chart {
		height: 240px;
	}	
}
#chart svg > g:last-child {
	pointer-events: none;
}

#chart {

height: 450px;

}

@media (max-width:767px) {

#chart {

height: 240px;

}

#chart svg > g:last-child {

pointer-events: none;

}

Пример:

HTML:

JS:

CSS:

Смотрите также:

Добавить комментарий: