Amcharts - рассчитать и построить график изменения
У меня есть набор значений на линейном графике, которые идут как показано ниже
Данные охватывают годы. Вывод на картинке выше приходит из SQL-запроса из базы данных. Задача, которую я имею, состоит в том, чтобы представить как фактическое количество посещений страницы, так и скорость роста на одном графике.
Я нанес на график количество попаданий в виде столбца с количеством совпадений по оси Y с левой стороны. Я создал многострочный график и комбинацию строки и столбца ранее. Таким образом, можно создать один для этого тоже. Тем не менее, есть ли способ, которым amcharts может рассчитать скорость изменения без необходимости извлекать это как другое поле SQL-запроса?
Мне бы хотелось, чтобы amcharts построил линейный график для скорости изменения по оси Y, скажем, с правой стороны. Любые другие идеи борьбы с этим также высоко ценится.
ОСТАВШЕСЬ ГОЛОВОЛОМКИ
На изображении выше оба параметра "# СОБЫТИЕ" и "СОБЫТИЕ # - РОСТ" показывают одинаковое значение. Как я мог получить "EVENT # - ROWTH RATE", чтобы фактически показать% изменения (69% согласно приложенной картинке), а не значение?
Вышеуказанный вывод взят из следа firebug. Как видно из рисунка, 2 графика имеют один и тот же график "значения" на 2 разных осях значений, на одной из которых включен процент.
1 ответ
Вы можете создать отдельный график и ось значений для этого. Ось значения имеет свойство recalculateToPercentsкоторый когда установленtrueпересчитает абсолютные значения до изменения в процентах.
Таким образом, у вас будет один обычный график, который вы делаете прямо сейчас, и отдельный дуэт оси график / значение для отображения динамики.
Я думаю, что рабочий пример может быть лучше проиллюстрировать это:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"position": "left",
"minimum": 0,
"maximum": 100
}, {
"id": "v2",
"gridAlpha": 0,
"position": "left",
"offset": 60,
"recalculateToPercents": true
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"lineThickness": 2,
"title": "Absolute values",
"valueField": "value",
"valueAxis": "v1"
}, {
"id": "g1",
"bullet": "round",
"lineThickness": 2,
"title": "Change values",
"valueField": "value",
"valueAxis": "v2",
"showBalloon": false
}],
"legend": {
"valueText": ""
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true
},
"dataProvider": [ {
"date": "2013-01-02",
"value": 67
}, {
"date": "2013-01-03",
"value": 64
}, {
"date": "2013-01-04",
"value": 66
}, {
"date": "2013-01-05",
"value": 60
}, {
"date": "2013-01-06",
"value": 63
}, {
"date": "2013-01-07",
"value": 61
}, {
"date": "2013-01-08",
"value": 60
}, {
"date": "2013-01-09",
"value": 65
}, {
"date": "2013-01-10",
"value": 75
}, {
"date": "2013-01-11",
"value": 77
}, {
"date": "2013-01-12",
"value": 78
}, {
"date": "2013-01-13",
"value": 70
}, {
"date": "2013-01-14",
"value": 70
}, {
"date": "2013-01-15",
"value": 73
}, {
"date": "2013-01-16",
"value": 71
}, {
"date": "2013-01-17",
"value": 74
}, {
"date": "2013-01-18",
"value": 78
}, {
"date": "2013-01-19",
"value": 85
}, {
"date": "2013-01-20",
"value": 82
}, {
"date": "2013-01-21",
"value": 83
}, {
"date": "2013-01-22",
"value": 88
}, {
"date": "2013-01-23",
"value": 85
}, {
"date": "2013-01-24",
"value": 85
}, {
"date": "2013-01-25",
"value": 80
}, {
"date": "2013-01-26",
"value": 87
}, {
"date": "2013-01-27",
"value": 84
}, {
"date": "2013-01-28",
"value": 83
}, {
"date": "2013-01-29",
"value": 84
}, {
"date": "2013-01-30",
"value": 81
}]
});<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>Вы заметите, что оба графика используют один и тот же valueField,
Приведенное выше решение рассчитает изменение до первого значения.
Если вам нужно, чтобы изменение было рассчитано из любой предыдущей точки данных, вам необходимо предварительно обработать данные.
Мы можем использовать AmCharts.addInitHandler()метод для указания пользовательской функции, которая будет вызываться перед инициализацией диаграммы, поэтому мы можем внести в нее некоторые изменения в последнюю минуту и произвести вычисления.
Приведенное ниже решение будет использовать его для поиска собственной настройкиrecalculateв графиках, и автоматически пересчитает свои абсолютные значения данных, чтобы изменить в процентах.
Надо сказать, что это не сработает, если ваши данные содержат хотя бы одно нулевое значение, потому что нет способа рассчитать процентное изменение от нуля.
AmCharts.addInitHandler(function(chart) {
// look for graphs that need to be recalculated
var graphs = [];
for(var i = 0; i < chart.graphs.length; i++) {
var graph = chart.graphs[i];
if (graph.recalculate === true) {
graph.originalValueField = graph.valueField;
graph.valueField = graph.valueField + "Change";
graphs.push(graph);
}
}
// calculate the data
var prev = [];
for(var i = 0; i < chart.dataProvider.length; i++) {
var dp = chart.dataProvider[i];
for(var g = 0; g < graphs.length; g++) {
var graph = graphs[g];
// ignore empty data points
if(isNaN(dp[graph.originalValueField]))
continue;
// handle first data point
if(prev[g] === undefined) {
prev[g] = dp[graph.originalValueField];
}
// calculate the change
var change = dp[graph.originalValueField] - prev[0];
dp[graph.valueField] = Math.round( change / prev[0] * 10000) / 100;
// assign previous value
prev[g] = dp[graph.originalValueField];
}
}
console.log(chart.dataProvider);
}, ["serial"]);
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"position": "left"
}, {
"id": "v2",
"gridAlpha": 0,
"position": "left",
"offset": 60,
"unit": "%"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"lineThickness": 2,
"title": "Absolute values",
"valueField": "value",
"valueAxis": "v1"
}, {
"id": "g2",
"bullet": "round",
"lineThickness": 2,
"title": "Change values",
"valueField": "value",
"valueAxis": "v2",
"recalculate": true,
"balloonText": "[[value]]%"
}],
"legend": {
"valueText": ""
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true
},
"dataProvider": [ {
"date": "2013-01-02",
"value": 67
}, {
"date": "2013-01-03",
"value": 64
}, {
"date": "2013-01-04",
"value": 66
}, {
"date": "2013-01-05",
"value": 60
}, {
"date": "2013-01-06",
"value": 63
}, {
"date": "2013-01-07",
"value": 61
}, {
"date": "2013-01-08",
"value": 60
}, {
"date": "2013-01-09",
"value": 65
}, {
"date": "2013-01-10",
"value": 75
}, {
"date": "2013-01-11",
"value": 77
}, {
"date": "2013-01-12",
"value": 78
}, {
"date": "2013-01-13",
"value": 70
}, {
"date": "2013-01-14",
"value": 70
}, {
"date": "2013-01-15",
"value": 73
}, {
"date": "2013-01-16",
"value": 71
}, {
"date": "2013-01-17",
"value": 74
}, {
"date": "2013-01-18",
"value": 78
}, {
"date": "2013-01-19",
"value": 85
}, {
"date": "2013-01-20",
"value": 82
}, {
"date": "2013-01-21",
"value": 83
}, {
"date": "2013-01-22",
"value": 88
}, {
"date": "2013-01-23",
"value": 85
}, {
"date": "2013-01-24",
"value": 85
}, {
"date": "2013-01-25",
"value": 80
}, {
"date": "2013-01-26",
"value": 87
}, {
"date": "2013-01-27",
"value": 84
}, {
"date": "2013-01-28",
"value": 83
}, {
"date": "2013-01-29",
"value": 84
}, {
"date": "2013-01-30",
"value": 81
}]
});<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>