Selecting graph sections using chart cursor
HTML
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<!-- Resources -->
<script src="http://rzv/assets/js/jquery.min.js"></script>
<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/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Chart code -->
<script>
var chartData = [];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"sequencedAnimation": false,
"startDuration": 0,
"startEffect": "easeOutSine",
"backgroundColor": "#2f4f8e",
"backgroundAlpha": "0.00",
"marginRight": 20,
"marginLeft": 20,
"trendLines": [],
"graphs": [],
"autoMarginOffset": 20,
"synchronizeGrid":true,
"mouseWheelZoomEnabled":true,
"dataProvider": chartData,
"legend": { // под графиком селекты
"generateFromData": true,
//"useGraphSettings": true,
"markerSize": 20,
"valueWidth": 50,
// "valueWidth":100, // ширина селекта
"verticalGap": 10, // отступ от графика (график сам уменьшается!)
// "horizontalGap": 10,
"maxColumns": 12, // максимальное кол-во колонок в длину
// "valueText": " - [[value]]°C",
"position": "bottom", // сверху размещаем, bottom - снизу
},
"balloon": {
"borderThickness": 1.1,
"shadowAlpha": 0.3,
"animationDuration": 0,
"disableMouseEvents": false,
"fadeOutDuration": 0,
"offsetX": 1,
"offsetY": 6,
"showBullet": true
},
"valueAxes": [
{
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true,
"title": "температура, °C"
},
{
...
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
chart.addListener("init", function (event) {
chart.chartCursor.addListener("onShowCursor", function (event) {
console.log(event);
});
});