如何在amCharts 3中协调"X“？
如何在amCharts 3中协调"X“？
提问于 2018-06-18 22:54:25
对不起，我的英语不好。
我有图表类型"serial“- here
我不能得到沿x轴的起点和终点坐标。但是当我使用图表类型"XY“时，我成功了。
我这样做是为了将值写入数组中，当图形放大时，我们可以通过单击鼠标右键返回一步
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,
"markerSize": 20,
"valueWidth": 50,
// "valueWidth":100, // ширина селекта
"verticalGap": 10, // отступ от графика (график сам уменьшается!)
// "horizontalGap": 10,
"maxColumns": 12, // максимальное кол-во колонок в длину
// "valueText": " - [[value]]°C",
"position": "bottom", // сверху размещаем, bottom - снизу
},
"balloon": {
"showBullet": false
},
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true,
"title": "Температура, °C"
},{
"axisAlpha": 0,
"position": "bottom",
"ignoreAxisWidth":true,
"centerLabels": true,
"title": "Расстояние, м"
}],
"valueScrollbar":{
"oppositeAxis":false,
"offset":70,
"selectedBackgroundColor": "#2f4f8e", // цвет
"scrollbarHeight":10
},
"chartScrollbar": {
"graph": 'temperature0', // включить скроллы
"oppositeAxis":false, // полоса метров снизу
"offset":70, // отступ
"scrollbarHeight": 10, //размер
"selectedBackgroundColor": "#2f4f8e", // цвет
"autoGridCount":false, // подсказки не выводим у скролов
},
"categoryField": "meters",
"categoryAxis": {
"axisAlpha": 0,
"gridPosition": "start",
"position": "bottom",
"ignoreAxisWidth":true,
"ignoreAxisWidth":true,
"title": "Расстояние, м"
},
"chartCursor": {
"enabled": true,
"pan": false,
"oneBalloonOnly": true,
"valueLineEnabled": true,
"cursorColor": "#2F4F8E",
"cursorPosition": "middle",
"bulletsEnabled": false,
"bulletSize": 0,
"graphBulletAlpha": 1,
"graphBulletSize": 0,
"avoidBalloonOverlapping": false,
"categoryBalloonAlpha": 0.67,
"selectionAlpha": 0.3,
"valueLineAlpha": 0.4,
"animationDuration": 0,
"cursorAlpha": 0.4,
"balloonPointerOrientation": "vertical", // horizontal
"categoryBalloonEnabled": true,
"leaveAfterTouch": false,
"showNextAvailable": true,
"tabIndex": 0,
"valueZoomable": true,
"valueLineBalloonEnabled": true // вкл \ выкл вывод координат по бокам
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Скважина № 15276"
}
],
"listeners": []
});
function getRandomColor() {
var lum = -0.25;
var hex = String('#' + Math.random().toString(16).slice(2, 8).toUpperCase()).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
var rgb = "#",
c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00" + c).substr(c.length);
}
return rgb;
}
var graph = new AmCharts.AmGraph();
var randomColor = getRandomColor();
graph.type = "smoothedLine",
graph.bullet = "circle";
graph.autoDisplay = true;
graph.bulletAlpha = 0; // скроем
graph.bulletBorderAlpha = 0; // скроем
graph.bulletColor = randomColor;
graph.bulletSize = 4; // размер точки у графика (чтобы открывался хинт еще не доводя до точки)
graph.maxBulletSize = 10; // максимальный размер точки у графика
graph.minBulletSize = 0; // минимальный размер точки у графика
graph.hideBulletsCount = 10;
graph.lineThickness = 1.8,
graph.lineColor = randomColor,
graph.useLineColorForBulletBorder = false,
graph.balloonText = "<span style='font-size:9px;'>05:10 31.12.17<br><b style='font-size:11px;margin-top:9px;'>[[temperature0]]</b> °C<br><b style='font-size:11px;'>[[meters]]</b> м</span>";
graph.title = "(05:10) 30.11.2017 ";
graph.valueField = "temperature0";
firstGraph([[0,0.29],[1.63,0.02],[3.26,-0.12],[4.89,-0.13],[6.52,0.07],[8.15,0.42],[9.78,0.71],[11.41,0.81],[13.04,0.75],[14.67,0.7],[16.3,0.82],[17.93,0.97],[19.56,0.97],[21.19,0.82],[22.82,0.69],[24.45,0.68],[26.08,0.79],[27.71,0.91],[29.34,0.93],[30.97,0.84],[32.6,0.72],[34.23,0.73],[35.86,0.9],[37.49,1.08],[39.12,1.16],[40.75,1.15],[42.38,1.08],[44.01,0.95],[45.64,0.76],[47.27,0.63],[48.9,0.64],[50.53,0.75],[52.16,0.85],[53.79,0.94],[55.42,1.04],[57.05,1.16],[58.68,1.29],[60.31,1.26],[61.94,1.03],[63.57,0.73],[65.2,0.54],[66.83,0.51],[68.46,0.61],[70.09,0.61],[71.72,0.51],[73.35,0.54],[74.98,0.73],[76.61,1.03],[78.24,-1.37],[79.87,3.2],[81.5,7.32],[83.13,10.43],[84.76,12.39],[86.39,13.5],[88.02,14.2],[89.65,14.74],[91.28,15.24],[92.91,15.8],[94.54,16.7],[96.17,18.48],[97.8,21.68],[99.43,26.66],[101.06,33.4],[102.69,41.48],[104.32,50.06],[105.95,58.04],[107.58,64.53],[109.21,69.22],[110.84,72.2],[112.47,73.85],[114.1,74.62],[115.73,74.86],[117.36,74.76],[118.99,74.51],[120.62,74.19],[122.25,73.88],[123.88,73.61],[125.51,73.39],[127.14,73.23],[128.77,73.16],[130.4,73.22],[132.03,73.34],[133.66,73.46],[135.29,73.52],[136.92,73.47],[138.55,73.35],[140.18,73.2],[141.81,73.02] ]);
chart.addGraph(graph);
// add graph (temperature1, temperature2 ... temperatureN )
var graph = new AmCharts.AmGraph();
var randomColor = getRandomColor();
graph.type = "smoothedLine",
graph.bullet = "circle";
graph.autoDisplay = true;
graph.bulletAlpha = 0; // скроем
graph.bulletBorderAlpha = 0; // скроем
graph.bulletColor = randomColor;
graph.dashLengthField = 'meters';
graph.bulletSize = 4; // размер точки у графика (чтобы открывался хинт еще не доводя до точки)
graph.maxBulletSize = 10; // максимальный размер точки у графика
graph.minBulletSize = 0; // минимальный размер точки у графика
graph.hideBulletsCount = 10;
graph.lineThickness = 1.8,
graph.lineColor = randomColor,
graph.useLineColorForBulletBorder = false,
graph.balloonText = "<span style='font-size:9px;'>05:10 31.12.17<br><b style='font-size:11px;margin-top:9px;'>[[temperature1]]</b> °C<br><b style='font-size:11px;'>[[meters]]</b> м</span>";
graph.title = "(05:10) 31.12.2017 ";
graph.valueField = "temperature1";
createGraph([[0,-10.52],[1.63,-11.14],[3.26,-11.5],[4.89,-11.62],[6.52,-11.46],[8.15,-11.18],[9.78,-11.02],[11.41,-11.04],[13.04,-11.24],[14.67,-11.56],[16.3,-11.83],[17.93,-11.79],[19.56,-11.37],[21.19,-10.87],[22.82,-10.63],[24.45,-10.62],[26.08,-10.64],[27.71,-10.61],[29.34,-10.52],[30.97,-10.48],[32.6,-10.55],[34.23,-10.63],[35.86,-10.6],[37.49,-10.52],[39.12,-10.48],[40.75,-10.51],[42.38,-10.55],[44.01,-10.62],[45.64,-10.7],[47.27,-10.65],[48.9,-10.42],[50.53,-10.19],[52.16,-10.14],[53.79,-10.25],[55.42,-10.44],[57.05,-10.7],[58.68,-11.01],[60.31,-11.28],[61.94,-11.41],[63.57,-11.31],[65.2,-11.01],[66.83,-10.74],[68.46,-10.66],[70.09,-10.66],[71.72,-10.74],[73.35,-11.01],[74.98,-11.31],[76.61,-11.41],[78.24,-13.12],[79.87,-8.7],[81.5,-4.64],[83.13,-1.44],[84.76,0.53],[86.39,1.5],[88.02,1.89],[89.65,2.06],[91.28,2.26],[92.91,2.8],[94.54,4.14],[96.17,6.86],[97.8,11.69],[99.43,19.31],[101.06,29.65],[102.69,41.6],[104.32,53.55],[105.95,63.95],[107.58,71.78],[109.21,76.82],[110.84,79.49],[112.47,80.72],[114.1,81.42],[115.73,81.97],[117.36,82.39],[118.99,82.74],[120.62,82.97],[122.25,82.86],[123.88,82.37],[125.51,81.86],[127.14,81.63],[128.77,81.49],[130.4,81.17],[132.03,80.73],[133.66,80.41],[135.29,80.41],[136.92,80.68],[138.55,80.87],[140.18,80.69],[141.81,80.31],[143.44,80.02],[145.07,79.91],[146.7,79.9],[148.33,79.89],[149.96,79.83],[151.59,79.93],[153.22,80.36],[154.85,81.07],[156.48,81.89],[158.11,82.62],[159.74,83.16],[161.37,83.58],[163,83.96],[164.63,84.3],[166.26,84.51],[167.89,84.52],[169.52,84.34],[171.15,84.13],[172.78,84.08],[174.41,84.28],[176.04,84.69],[177.67,85.23],[179.3,85.81],[180.93,86.35],[182.56,86.86],[184.19,87.47],[185.82,88.25],[187.45,88.98],[189.08,89.43],[190.71,89.59],[192.34,89.61],[193.97,89.55],[195.6,89.51],[197.23,89.63],[198.86,89.96],[200.49,90.38],[202.12,90.71],[203.75,90.87],[205.38,90.86],[207.01,90.73],[208.64,90.59],[210.27,90.71],[211.9,91.19],[213.53,91.74],[215.16,92.09]], 'temperature1')
chart.addGraph(graph);
// console.log(chartData);
// add first array
function firstGraph(data) {
for (var i = 0; i < data.length; i++) {
chartData.push({meters:data[i][0],temperature0:data[i][1]});
}
}
// add other arrays
function createGraph(data, name) {
var meters = [];
var temperature = [];
for (var i = 0; i < data.length; i++) {
meters.push(data[i][0]);
temperature.push(data[i][1]);
}
for (var i = chartData.length - 1; i >= 0; i--) {
var index = meters.indexOf(chartData[i].meters);
// в главном массиве уже есть такое расстояние
if(index != -1){
chartData[i][name] = temperature[index]; // добавим в него тогда новый ключ temperature{N}
// удалим значение реасстояния и температуры новой скважины, оно нам уже не нужно, но нужны те, которые остались
meters.splice(index, 1);
temperature.splice(index, 1);
}
}
// проходимся по всем оставшимся значениям, которых не было в главном массиве
for (var i = 0; i < meters.length; i++) {
// сделаем проверку
var is = false;
var pr = 0; // индекс элемента главного массива, приближенный метраж для нового элемента
for (var ii = 0; ii < chartData.length; ii++) {
if (meters[i] < chartData[ii].meters) {
pr = ii + 1;
break;
} else is = true;
}
var obj = {};
obj['meters'] = meters[i];
obj[name] = temperature[i];
if(pr === 0 && is)
chartData.push(obj);
else if(pr !== 0)
// записываем в массив в нужный ключ
chartData.splice(pr-1, 0, obj); // temperature1 - у каждой скважины будет свой номер
}
}
function memoryCoord() {
if(typeof chart == 'undefined') return;
chart.zoomValues = {x:[],y:[]};
var zValue = chart.zoomValues;
// присваиваем значения по умолчанию (текущие)
zValue.x.push({startValue : chart.valueAxes[1].min, endValue : chart.valueAxes[1].max});
zValue.y.push({startValue : chart.valueAxes[0].min, endValue : chart.valueAxes[0].max});
chart.addListener("init", function (event) {
chart.chartCursor.addListener("zoomed", function(event) { // событие "только при увеличении"
for (i in event.chart.valueAxes) {
var ev = event.chart.valueAxes[i];
var axis = 'x';
if ('left' == ev.position || 'right' == ev.position)
axis = 'y';
zValue[axis].push({startValue : ev.min, endValue : ev.max});
}
console.log(chart.valueAxes);
});
});
$('#chartdiv').on('mousedown mouseup contextmenu', function (e) { // перемещение графика по 2 кнопке
fixWhich(e);
switch (e.which) {
case 3: // правая кнопка мыши
e.preventDefault();
switch(e.type){
case 'contextmenu': // зум - шаг назад
var zValue = chart.zoomValues;
if(zValue.x.length > 1){
chart.valueAxes[0].zoomToValues(zValue.y[zValue.y.length - 2].startValue, zValue.y[zValue.y.length - 2].endValue);
chart.valueAxes[1].zoomToValues(zValue.x[zValue.x.length - 2].startValue, zValue.x[zValue.x.length - 2].endValue);
zValue.y.splice(zValue.y.length - 1, 1);
zValue.x.splice(zValue.x.length - 1, 1);
} else {
chart.zoomOut();
}
break;
}
break;
case 2: // кнопка мыши по середине (колесико)
e.preventDefault();
switch(e.type){
case 'mousedown': // перетаскивание
chart.chartCursor.pan = true;
$('.amcharts-chart-div').css('cursor', 'move');
break;
case 'mouseup': // отключаем перетаскиевание
chart.chartCursor.pan = false;
$('.amcharts-chart-div').css('cursor', 'default');
break;
}
break;
}
});
}
memoryCoord();
/*
IE8 events click mouse
*/
function fixWhich(e) {
if (!e.which && e.button) { // если which нет, но есть button... (IE8-)
if (e.button & 1) {
e.which = 1; // левая кнопка
}
else if (e.button & 4) {
e.which = 2; // средняя кнопка
}
else if (e.button & 2) {
e.which = 3; // правая кнопка
}
}
}#chartdiv {
width : 100%;
height: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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/themes/light.js"></script>
<!-- HTML -->
<div id="chartdiv"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-20 05:32:21
原来它们有chart.startIndex和chart.endIndex这样的属性，我可以使用zoomToIndexes(chart.startIndex，chart.endIndex)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50912261
复制相关文章
相似问题
腾讯云开发者
