Question

我在屏幕上显示AmCharts图表。 diagram screen

默认情况下，滚动条中的滑块位于正确位置。如何在默认情况下将其置于左侧位置？ left position scrollbar

我应该添加哪些选项

"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);

Answer 1

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>

AmCharts如何将滚动条中的滑块向左移动？

1 个答案: