首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在amCharts 3中协调"X“?

如何在amCharts 3中协调"X“?
EN

Stack Overflow用户
提问于 2018-06-18 22:54:25
回答 1查看 217关注 0票数 1

对不起,我的英语不好。

我有图表类型"serial“- here

我不能得到沿x轴的起点和终点坐标。但是当我使用图表类型"XY“时,我成功了。

我这样做是为了将值写入数组中,当图形放大时,我们可以通过单击鼠标右键返回一步

代码语言:javascript
复制
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; // правая кнопка
    }
  }
}
代码语言:javascript
复制
#chartdiv {
  width	: 100%;
  height: 500px;
}
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-20 05:32:21

原来它们有chart.startIndex和chart.endIndex这样的属性,我可以使用zoomToIndexes(chart.startIndex,chart.endIndex)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50912261

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档