Как сделать свой первый диаграмма JavaScript с Jscharting

Далее, используя ту же технику, добавьте еще один тег скрипта, ссылающийся на ваш пустой файл JavaScript. Добавьте этот скрипт после jscharting.js Сценарий, так что он выглядит так:

Отлично. Мы почти готовы нарисовать пустую таблицу. Последнее, что вам нужно сделать, это добавить

Добавьте этот HTML-код внутри Теги.

DIV должен иметь идентификатор, чтобы вы могли сообщить диаграмму, которая Div, чтобы нарисовать. В этом случае удостоверение личности Chartdiv Отказ

Вы можете заметить атрибут стиля

Вы все набор с файлом HTML. Открыть index.js Файл и добавьте пустую таблицу на эту страницу, написав следующий код, который включает в себя идентификатор DIV Chartdiv :

JSC.Chart('chartDiv', {});

Открыть index.html Файл в браузере (перетащите и опустите файл в веб-браузер, как Chrome).

Не очень, чтобы увидеть еще, но вы можете заметить небольшой ОАО «Логотип на этой странице». Это указывает на диаграмму подключен и рисунок.

step1-b.zip

Шаг 2 - Играй с диаграммой немного

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

Возвращаясь к index.js Файл, замените содержимое следующим кодом, который добавляет больше параметров на график.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

Теперь обновите (F5) окно браузера, где index.html Страница загружена.

Хороший! Вы только что сделали свой первый график, используя JavaScript.

Вы сделали гистограмму, установив опцию типа диаграммы в «Горизонтальная колонна» Отказ Если вы предпочитаете вертикальную колонну, установите значение для «колонна» Отказ Вы также добавили серию с двумя точками на график для яблок и апельсинов.

Все данные диаграммы состоят из серии и точек. Серия - это просто группа точек данных. Диаграммы могут содержать один или несколько серий данных. Точки данных состоят из значений, которые отображаются на осях X и Y. Очки могут также включать много других описательных переменных и значений.

Пример выше содержит только одну серию. Теперь давайте посмотрим на варианты для диаграммы с двумя сериями. Замените содержимое файла JavaScript с помощью этого кода.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

Освежающий окно браузера покажет этот график.

Параметры диаграммы выглядят похожи. Еще барной диаграммы, но на этот раз есть дополнительный объект в массиве серии. Мы также добавили свойства имени для каждой серии, чтобы график мог идентифицировать их в легенде.

Если вы заинтересованы в создании различных диаграмм, таких как радарные диаграммы, диаграммы площади, круговые диаграммы, графики Gantt или даже диаграммы Halendar Heatmap, посмотрите на Галерея галереи Jschartinging и исходный код (параметры диаграммы), используемые для создания этих графиков. Вы можете быстро узнать, как использовать другие функции диаграммы, скопировав доступные примеры.

step2.zip

Шаг 3 - Подготовьте данные

Формат данных CSV - это именно то значение, разделенные запятыми. Файл содержит строки (строки), и каждая строка представляет запись или запись. Обычно первый ряд значений содержит имена каждого значения разделенного запятыми (столбец). Последующие строки содержат свои ценности.

name,age
chris,26
mike,34

CSV является читабельным человеком, но есть вариации этого формата. Иногда, если значения содержат запятые (например, почтовые адреса), формат не работает так, чтобы каждое значение также завернуто в цитаты. Таким образом, запятые во внутренние цитаты игнорируются, и формат все еще может работать, используя только запятые за пределами цитат, чтобы отделить значения.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

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

Но давайте не будем увязнуть в минутах. JSCharting предоставляет ряд инструментов, которые помогают с этим процессом, и мы будем использовать один из них, чтобы пропустить беспокоиться о формате файла CSV и преобразовать его в JSON (запись объекта JavaScript). Результатом будет массив объектов. Каждый объект представляет собой строку с названными свойствами. Первый ряд в файле CSV используется для определения имен этих свойств.

Это URL-адрес информации, которые вас интересуют: https://data.cdc.gov/resource/w9j2-ggv5.csv Отказ

Вы можете нажать, чтобы загрузить и открыть его в Excel.

Тем не менее, вы будете загружать и получать доступ к этому CSV данные в режиме реального времени с использованием кода JavaScript. Приведенный ниже код может быть немного запутанным сначала, но он коротко, и вы можете повторно использовать его, чтобы получить файлы CSV, текста или JSON через Интернет программно. Это похоже на более старую технологию Ajax, но намного проще в использовании.

Еще раз замените содержание index.js Файл со следующим:

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
	csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

Почему так сложно? Это потому, что когда вы запрашиваете файл, он не сразу становится доступным. Есть задержка, и вы должны ждать, пока файл прибывает. Поэтому сначала вы запрашиваете файл с другого сайта, используя fetch () Отказ

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

Тогда код внутри тогда (...) Функция аргументов вызывается с ответом, когда она прибудет. Эта функция преобразует ответ в текст и возвращает его, который передает результат к следующему тогда () Функция аргумента.

.then(function (response) {
	return response.text();
})

Следующий тогда (...) Функция аргумента вызывает Csvtoseries () Функция и передает текст как аргумент.

.then(function (text) {
	csvToSeries(text);
})

В поймать () Функция, вы можете указать, что делать, если что-то пойдет не так. Например, может быть, Интернет вниз, или URL не правильный.

.catch(function (error) {
	//Something went wrong
	console.log(error);
});

В этом случае ошибка отправляется на консоль.

В Csvtoseries () Функция мы передаем этот текст на консоль для проверки.

function csvToSeries(text) {
   console.log(text);
}

? Примечание: Родной fetch () Функция не поддерживается в Internet Explorer 11. Если вы хотите также поддерживать этот браузер, вы можете использовать Jsc.fetch () Функция, которая поставляется с jscharting. Он обеспечивает ту же функциональность, но добавляет дополнительную поддержку для IE11.

Перетащите index.html Файл в окно браузера (или обновить страницу, если уже открыть) и нажмите F12. Это откроет окно devtools браузера Chrome. По умолчанию нижняя половина окна Devtools покажет консольный выход. Это то, где текст отправляется при запуске кода, как:

console.log(text);

Вы также можете вставить или записать код в это консольное окно для его выполнения. Попробуйте вставлять весь фрагмент кода выше в окно консоли (рядом с символом>) и нажмите Enter. Вы заметите, что вы получите тот же результат в выходной среде консоли. Это может быть полезно для тестирования линейки кода и экспериментов.

step3-a.zip

В этот момент вы получили текст файла CSV через Интернет и отправили его на консоль, чтобы доказать, что он работает. Теперь мы можем начать работать с ним.

Давайте посмотрим на этот файл данных, чтобы получить представление о том, что внутри: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Я использовал Excel, чтобы сортировать строки к столбцу года, чтобы проанализировать строки данных за один год.

Каждый год содержит 9 строк с данными на основе гонки и секса. Мы заинтересованы только в выделенных мужчинах и женских ценностях всех гонок за каждый год. Вы создадите две серии на основе выделенных рядов. Серия для женщин и один для мужчин ценностей.

Теперь, когда у вас есть идея того, что должно произойти, давайте начнем.

Во-первых, давайте будем использовать Jsc.csv2json () Функция для преобразования текста в формат JSON и передайте его на консоль, чтобы увидеть, что он делает.

Обновите Csvtoseries () Функция со следующим кодом:

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

Обновите браузер, чтобы увидеть обновленный выход консоли.

Консоль показывает массив из 1062 записей. И это одна из этих записей:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

? Примечание: Консоль может отображать массивы и объекты для проверки, и вы можете расширить и разрушать разделы в консоли для изучения деталей.

Имя недвижимости strume_life_expectancy немного долго, но вам нужно будет использовать его. Чтобы не набрать его более одного раза, определите постоянную переменную для хранения этого имени. Когда вам нужно использовать это свойство, вы можете просто написать имя переменной Liveexp Отказ Это будет выглядеть так ряд [liveexp] вместо row.average_life_expectancy Отказ

Добавьте эту строку в верхней части Csvtoseries () функция.

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	...

Вы можете обработать эти данные, используя простой ванильный JavaScript. Конечный результат, который мы хотим, это две серии с точками данных, которые включают в себя год и продолжительность жизни для каждой точки.

Обновите Csvtoseries () со следующим кодом:

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		console.log(row);
	});
}

Он определяет массивы для точек данных для мужчин и женщин. Затем он называет массив dataasjson.foreach () Функция, проходящая обратный вызов Функция (строка) {...} функция как аргумент. foreach () Функция выполнит функцию обратного вызова для каждого элемента в DataAsjson множество. На данный момент мы просто позвоним console.log (ряд) на каждой строке, которые столкнулись с функцией обратного вызова.

Обновите браузер и проверьте консольный выход.

Давайте добавим какую-то логику для фильтрации данных, которые мы нужны, и регистрируйтесь в результате в окне консоли. Заменить Csvtoseries () Функция с этим кодом.

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		if (row.race === 'All Races') {
			if (row.sex === 'Male') {
				male.push({x: row.year, y: row[lifeExp]});
			} else if (row.sex === 'Female') {
				female.push({x: row.year, y: row[lifeExp]});
			}
		}
	});
    console.log([male, female]);
}

Внутри функции обратного вызова вы решаете, представляет ли стрость проценты и использовать его или, если не отказаться от него.

if (row.race === 'All Races') {
	if (row.sex === 'Male') {
		//add data to male array
		male.push({x: row.year, y: row[lifeExp]});
	} else if (row.sex === 'Female') {
		//add data to female array
		female.push({x: row.year, y: row[lifeExp]});
	}
}

Логические проверяет, чтобы увидеть, если Row.race Значение равен «все расы». Если это так, то он проверяет, если row.sex Собственность равен либо «мужчине» или «женщине». Если ряд равен либо, он добавляет данные для либо мужчина или Женский Массивы как {x, y} Объект Point. Обратите внимание на использование Liveexp Переменная определена выше, которая помогает сократить этот код.

В конце вы использовали console.log ([мужчина, женщина]) Чтобы пройти мебель и женские переменные в консоль для проверки и убедиться, что ваш код работал, как ожидалось.

После освежения браузера консоль показывает результат, который представляет собой две массивы, каждый из которых с 118 точками данных охватывает годы с 1900 по 2017 год.

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

Добавьте этот код в конце Csvtoseries () Функция:

return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

Если возвращенное значение было отправлено на консоль, он дал бы этот результат.

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

Чтобы узнать больше о обработке файлов CSV, используя утилиты Jscharting, см. Это Учебное пособие Отказ Когда вы готовы к более продвинутым обработке данных, Jsc.nest () Утилита Может использоваться для создания серии и точек от данных JSON с очень маленьким кодом.

step3-b.zip

Шаг 4 - Положить все это вместе

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

Начните с добавления Renderchart () функция до конца index.js файл. Вы пройдете данные серии к этой функции в качестве аргумента.

function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

В тогда () Функция аргумента, которая звонит Csvtoseries () Передайте серию результат к Renderchart () Функция, чтобы увидеть, что он рисует в браузере.

.then(function (text) {
	let series = csvToSeries(text);
	renderChart(series);
})

step4-a.zip

Теперь обновите браузер. Вы должны увидеть этот график, который использует данные CSV, которые вы обработаны в предыдущем разделе. Сладкий! ?

Вау, что случилось в 1918 году? Ожидаемая продолжительность жизни значительно упала там. По словам Википедии, было Пандемия гриппа Вовлечение вируса H1N1, который вытершим часть населения мира. Это неудачное событие показывает, как визуализирующие данные обеспечивают понимание, вы обычно не получаете только что смотреть на цифры.

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

Во-первых, добавьте заголовок в верхней части, чтобы объяснить, начёт просмотрщик, и аннотация в нижней части графика, чтобы зарекомендовать источник данных. Обновите Jsc.Chart () Функция конструктора для передачи следующих вариантов:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
		series: series
	});
}

Когда вы обновляете браузер, вы можете увидеть обновленный график.

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

Легко управлять положением аннотации с использованием таких значений, как «Вершина» или «Внутренние правые» Отказ «Внутри» Значение означает, что аннотация помещается внутри области диаграммы, где рисуется данные. Это Пример диаграммы коробки демонстрирует все параметры настройки положения.

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

legend_template: '%icon,%name'

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

legend_visible: false,
defaultSeries_lastPoint_label_text: '%seriesName',

'% seriesname' токен один из многих Точка связанных токенов Это можно использовать в любой точечной маркировке текста, чтобы показать детали точки и расчеты.

Наконец, давайте включите комбинированную всплывающую подсказку Xais Crosshair Crosshair, чтобы показать продолжительность жизни мужчины и женской жизни для любого указанного года. На мобильных устройствах вы можете нажать на диаграмму, чтобы увидеть подсказку Trasshair. При использовании ПК, отображаются подсказки, когда зависят от диаграммы с указателем мыши.

xAxis_crosshair_enabled: true,

Вам может быть интересно, что со всеми этими подчеркиваниями в именах собственности? Это не фактическое имя свойства. Это сокращение, способ написать:

xAxis: {crosshair: {enabled: true}},

Возможно, вам удобнее указать настройку с подчерками и Jscharting поймет, что вы имеете в виду.

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

Поскольку подсказку Crosshair показывает информацию о каждой точке, которую он пересекает, текст подсказки определяется в пределах вариантов точки. Точка умолчания Свойство определяет варианты точки, которые все точки будут наследовать автоматически.

defaultPoint_tooltip: '%seriesName %yValue years',

Для получения дополнительной информации об этой функции проверить Trasshair и комбинированная подсказка Отказ

Когда вы применяете все эти параметры, ваш код будет выглядеть похоже на следующий фрагмент. Заменить весь Renderchart () Функция с этим кодом.

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
        legend_visible: false,
		defaultSeries_lastPoint_label_text: '%seriesName',
		defaultPoint_tooltip: '%seriesName %yValue years',
		xAxis_crosshair_enabled: true,
		series: series
	});
}

Обновите окно браузера еще раз.

Ты сделал это!

Сначала вы получили данные CSV, используя родной JavaScript. Затем вы преобразовали его в формат JSON и отфильтровали данные в две серии. С помощью этих серий вы создали красивую интерактивную линейную диаграмму, используя JSCharting и настроили его, чтобы выглядеть профессионально.

Вы можете настроить и скорректировать диаграммы, чтобы удовлетворить ваши конкретные потребности. Посетите Jscharting Учебники Раздел Чтобы узнать больше о конкретной теме или найти диаграммы, похожие на то, что вы хотите сделать в Примеры галереи и скопируйте их, чтобы продолжить путешествие визуализации данных.

Если вы столкнетесь с проблемами, работающими с jscharting, не стесняйтесь Контакт команда поддержки. Они будут рады вести вас или помочь разрешить любые проблемы, которые вы можете столкнуться.

step4-b.zip

Бонусный вызов

Мы не использовали все данные, доступные в этом файле CSV. Давайте экспериментируем с ним для удовольствия и практики.

Создайте эту график, используя то, что вы узнали.

Этот ZIP-файл содержит ответ:

step5-bonus.zip

Можете ли вы подумать о других графиках, которые вы можете сделать с этими данными? Держите экспериментирующие и наслаждайтесь каждой минутой этого!