Линейный график

Ранее был уже показан пример линейного графика. Для его построения в параметре series надо указать опцию type: 'line':

Ext.onReady(function(){ 
	Ext.define('Browser', {
		extend: 'Ext.data.Model',
		fields: [{
				name: 'data1', 
				type: 'float' 
			},{
				name: 'data2', 
				type: 'float' 
			},{
				name: 'data3', 
				type: 'float' 
			},{ 
				name: 'name',
				type: 'string'
			}]
	});
	var store = Ext.create('Ext.data.Store', {
		model: 'Browser',
		data: [
			{ 'name': 'Январь', 'data1':36.52,  'data2':21.42,  'data3':30.71},
			{ 'name': 'Февраль', 'data1':37.09,  'data2':21.34,  'data3':29.82},
			{ 'name': 'Март', 'data1':38.07,  'data2':20.87,  'data3':29.3},
			{ 'name': 'Апрель', 'data1':39.15,  'data2':20.06,  'data3':29.71},
			{ 'name': 'Май', 'data1':41.38,  'data2':19.76,  'data3':27.72}
		]
	});
	Ext.create('Ext.panel.Panel', {
	   renderTo: Ext.getBody(),
	   title: 'Динамика за 2013 г.',
	   width: 400,
	   height: 300,
	   layout: 'fit',
	   items:[{
			xtype: 'chart',
			store: store,
			legend: {
				position: 'right'
		   },
		   axes: [{
				title: 'Доля браузера',
				type: 'Numeric',
				position: 'left',
				fields: ['data1', 'data2', 'data3']
			},{
				title: 'Месяц',
				type: 'Category',
				position: 'bottom',
				fields: ['name']
			}],
			series: [{
					type: 'line',
					title: 'Google Chrome',
					xField: 'name',
					yField: 'data1',
			},{
					type: 'line',
					title: 'Firefox',
					xField: 'name',
					yField: 'data2',

			},{
					type: 'line',
					title: 'IE',
					xField: 'name',
					yField: 'data3',
			}]
	   }]
	 });
});
Линейные графики в ExtJS 4

В отличие от линейного графика из одного из предыдущих параграфов здесь мы используем сразу несколько графиков. За создание каждого графика отвечает отдельный объект series, поэтому в данном случае у нас три объекта в массиве series - по одному для каждого браузера. Поле yField привязывается к отдельному полю данных, в то время как xField остается неизменным.

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

{
	type: 'line',
	title: 'Firefox',
	highlight: { // увеличиваем
		size: 7, // размер
		radius: 7 // и радиус при наведении на точку
	},
	xField: 'name',
	yField: 'data2',
	markerConfig: {
		type: 'circle',
		size: 4,
		radius: 4,
		'stroke-width': 0
	}
}

Во-первых, с помощью параметра highlight я указываю свойства, которые будут применяться к серии при наведении на точку графика. В данном случае график подсвечивается, а точка увеличивается на момент наведения.

Затем с помощью конфигурации markerConfig устанавливаем тип значка точки. Если ранее это был крестик по умолчанию, то в данном случае мы явно устанавливаем кружок (type: 'circle'), а также устанавливаем его параметры: радиус и т.д.

Настройка графика в ExtJS 4
comments powered by Disqus
Изучаем Ext JS 4
↑ Выше
Содержание
    Поддержать сайт на родительском проекте КГБ