Кодинг
★ Рубрика: Кодинг
★ Тема: графика, Javascript

Скрипт для построения графика со штриховкой

Представляем скрипт для построения очень красивого, адаптивного к размера области в которой размещается, графика. Пример графика вы можете видеть ниже. Поднесите курсор к черным точкам на графике, чтобы увидеть координаты точек. Для, отрисовки такого графика, вам понадобятся коды, приведенные ниже.
Во-первых стилевой файл, который уберет ссылку-рекламу разработчика.
#chartdiv > div > div > a{display:none !important;}
Затем надо подключить скрипты:
Дальше размещаем скрипт, отвечающий за настройку графика и за координаты точек, выводимых на графике. Ну и конечно же, вы можете настроить его для ваших данных. Код понятен без комментариев.
AmCharts.makeChart("chartdiv",
 {
 "type": "serial",
 "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
 "categoryField": "category",
 "autoMarginOffset": 40,
 "marginRight": 60,
 "marginTop": 60,
 "startDuration": 1,
 "fontSize": 13,
 "theme": "patterns",
 "categoryAxis": {
 "gridPosition": "start"
 },
 "trendLines": [],
 "graphs": [
 {
 "balloonText": "[[title]]: x=[[category]], y=[[value]]",
 "bullet": "round",
 "bulletSize": 10,
 "id": "AmGraph-1",
 "lineAlpha": 1,
 "lineThickness": 3,
 "title": "Координаты ",
 "type": "smoothedLine",
 "valueField": "column-1"
 }
 ],
 "guides": [],
 "valueAxes": [
 {
 "id": "ValueAxis-1",
 "title": ""
 }
 ],
 "allLabels": [],
 "balloon": {},
 "titles": [],
 "dataProvider": [
 {
 "category": "1",
 "column-1": 8,
 "column-2": 5
 },
 {
 "category": "2",
 "column-1": 6,
 "column-2": 7
 },
 {
 "category": "3",
 "column-1": 2,
 "column-2": 3
 },
 {
 "category": "4",
 "column-1": "4",
 "column-2": 3
 },
 {
 "category": "5",
 "column-1": 2,
 "column-2": 1
 },
 {
 "category": "6",
 "column-1": 3,
 "column-2": 2
 },
 {
 "category": "7",
 "column-1": 6,
 "column-2": 8
 }
 ]
 }
 );
Остался последний шаг - разместить на страницу в требуемое место контейнер, в котором будет выводиться график: Полный код html-страницы для построения графика приведен здесь.
 Похожие публикации: графика, Javascript

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]