Скрипт для построения графика со штриховкой
Представляем скрипт для построения очень красивого, адаптивного к размера области в которой размещается, графика. Пример графика вы можете видеть ниже. Поднесите курсор к черным точкам на графике, чтобы увидеть координаты точек. Для, отрисовки такого графика, вам понадобятся коды, приведенные ниже.
Во-первых стилевой файл, который уберет ссылку-рекламу разработчика.
Дальше размещаем скрипт, отвечающий за настройку графика и за координаты точек, выводимых на графике. Ну и конечно же, вы можете настроить его для ваших данных. Код понятен без комментариев.
#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