Как в AmCharts переместить ползунок на полосе прокрутки влево? - PullRequest
Новая
       5

Как в AmCharts переместить ползунок на полосе прокрутки влево?

0 голосов
/ 09 июня 2018

У меня есть диаграмма AmCharts, как на экране. экран диаграммы

По умолчанию ползунок на полосе прокрутки в правильном положении.Как сделать это в левом положении по умолчанию? полоса прокрутки влево

Какие опции я должен добавить к 

"chartScrollbar": {
    "enabled": true
},

UPD: полный код диаграммы AmChart.У меня есть несколько вариантов с «зумом», но если я это прокомментирую, ничего не изменится .----------------------------------------------------------------------------------------------------------- 

var chartOptions = {
    "type": "serial",
    "theme": "light",
    "columnWidth": 0.6,
    "maxSelectedSeries": 3,
    "rotate": false,
    "mouseWheelScrollEnabled": true,
    "zoomOutOnDataUpdate": false,
    "zoomOutButtonPadding": 2,
    "startDuration": 0,
    "panEventsEnabled": false,
    "chartScrollbar": {
    },
    "legend": {
        "position": "bottom",
        'fontSize': 12
    },
    "dataProvider": dataProvider,
    "valueAxes": [{
        "stackType": "regular",
        "axisAlpha": 0.3,
        "gridAlpha": 0,
        'fontSize': 13
    }],
    "graphs": [{
        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[CLIENT_REFUSED_MONEY]]</span>",
        "fillAlphas": 0.8,
        "labelText": "[[value]]→[[CLIENT_REFUSED_MONEY]]",
        "lineAlpha": 0.3,
        "title": "Refused",
        "type": "column",
        "color": "#000000",
        "valueField": "CLIENT_REFUSED_COUNT",
        'fontSize': 16,
    }, {
        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[DENIED_MONEY]]</span>",
        "fillAlphas": 0.8,
        "labelText": "[[value]]→[[DENIED_MONEY]]",
        "lineAlpha": 0.3,
        "title": "Denied",
        "type": "column",
        "color": "#000000",
        "valueField": "DENIED_COUNT",
        'fontSize': 16,
    }, {
        // On mouse hover which balloon is show
        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[IN_PROGRESS_MONEY]]</span>",
        "fillAlphas": 0.8,
        // Text on column (may unicode symbols, other fields)
        "labelText": "[[value]]→[[IN_PROGRESS_MONEY]]",
        "lineAlpha": 0.3,
        "title": "In progress",
        "type": "column",
        "color": "#000000",
        // Variable from data provider.
        "valueField": "IN_PROGRESS_COUNT",
        'fontSize': 16,
    }, {
        "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[APPROVED_MONEY]]</span>",
        "fillAlphas": 0.8,
        "labelText": "[[value]]→[[APPROVED_MONEY]]",
        "lineAlpha": 0.3,
        "title": "Approved",
        "type": "column",
        "color": "#000000",
        "valueField": "APPROVED_COUNT",
        'fontSize': 16,
    }],
    "categoryField": "operator",
    "categoryAxis": {
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0,
        "position": "left",
        'fontSize': 13,
        'boldLabels': true
    },
};

AmCharts.makeChart("underwriters-deals-chart", chartOptions);

1 Ответ

0 голосов
/ 09 июня 2018

maxSelectedSeries по умолчанию выбранная полоса прокрутки диаграммы направлена ​​с указанным увеличением.Вам нужно будет добавить код к событию init графика, чтобы вызвать zoomToIndexes, чтобы переместить его влево: 

var chartOptions = {
  // ...
  listeners: [{
    event: "init",
    method: function(e) {
      e.chart.zoomToIndexes(0, e.chart.maxSelectedSeries);
    }
  }]
};

Демонстрация ниже: 

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "columnWidth": 0.6,
  "maxSelectedSeries": 3,
  "rotate": false,
  "mouseWheelScrollEnabled": true,
  "zoomOutOnDataUpdate": false,
  "zoomOutButtonPadding": 2,
  "startDuration": 0,
  "panEventsEnabled": false,
  "chartScrollbar": {},
  "legend": {
    "position": "bottom",
    'fontSize': 12
  },
  "dataProvider": generateData(),
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0,
    'fontSize': 13
  }],
  "graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[CLIENT_REFUSED_MONEY]]</span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]→[[CLIENT_REFUSED_MONEY]]",
    "lineAlpha": 0.3,
    "title": "Refused",
    "type": "column",
    "color": "#000000",
    "valueField": "CLIENT_REFUSED_COUNT",
    'fontSize': 16,
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[DENIED_MONEY]]</span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]→[[DENIED_MONEY]]",
    "lineAlpha": 0.3,
    "title": "Denied",
    "type": "column",
    "color": "#000000",
    "valueField": "DENIED_COUNT",
    'fontSize': 16,
  }, {
    // On mouse hover which balloon is show
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[IN_PROGRESS_MONEY]]</span>",
    "fillAlphas": 0.8,
    // Text on column (may unicode symbols, other fields)
    "labelText": "[[value]]→[[IN_PROGRESS_MONEY]]",
    "lineAlpha": 0.3,
    "title": "In progress",
    "type": "column",
    "color": "#000000",
    // Variable from data provider.
    "valueField": "IN_PROGRESS_COUNT",
    'fontSize': 16,
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[value]]→[[APPROVED_MONEY]]</span>",
    "fillAlphas": 0.8,
    "labelText": "[[value]]→[[APPROVED_MONEY]]",
    "lineAlpha": 0.3,
    "title": "Approved",
    "type": "column",
    "color": "#000000",
    "valueField": "APPROVED_COUNT",
    'fontSize': 16,
  }],
  "categoryField": "operator",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left",
    'fontSize': 13,
    'boldLabels': true
  },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      e.chart.zoomToIndexes(0, e.chart.maxSelectedSeries);
    }
  }]
});

function generateData() {
  var data = [];
  for (var i = 0; i < 10; ++i) {
    data.push({
      CLIENT_REFUSED_COUNT: Math.floor(Math.random() * 10 + 1),
      DENIED_COUNT: Math.floor(Math.random() * 15 + 1),
      IN_PROGRESS_COUNT: Math.floor(Math.random() * 25 + 1),
      APPROVED_COUNT: Math.floor(Math.random() * 30 + 1),
      CLIENT_REFUSED_MONEY: Math.floor(Math.random() * 40000 + 1),
      DENIED_MONEY: Math.floor(Math.random() * 20000 + 1),
      IN_PROGRESS_MONEY: Math.floor(Math.random() * 150000 + 1),
      APPROVED_MONEY: Math.floor(Math.random() * 200000 + 1),
      operator: "Operator-" + (i + 1)
    });
  }
  return data;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>
...