Не знаю, как реализовать диапазон в амбартах - PullRequest
Новая
       10

Не знаю, как реализовать диапазон в амбартах

0 голосов
/ 21 февраля 2019

Я использую плагин amcharts для создания хороших графиков.Я нашел несколько вещей для добавления диапазонов, но структура кода диаграммы отличается от моей, и я не могу понять, как реализовать это с моим кодом.вот как я настроил свой график. 

var chartConfig = {
  "type": "serial",
  "theme": "none",
  "marginLeft": 70,
  "dataDateFormat": "YYYY-MM-DD",
  "graphs": [{
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "labelsEnabled": false,
    "tickLength": 0
  },
  "valueAxes": [{
    "ignoreAxisWidth": true
  }],

var charts = [];
charts.push(AmCharts.makeChart("chartdiv", chartConfig));
charts.push(AmCharts.makeChart("chartdiv2", chartConfig2));
charts.push(AmCharts.makeChart("chartdiv3", chartConfig3));

for (var x in charts) {
  charts[x].addListener("zoomed", syncZoom);
  charts[x].addListener("init", addCursorListeners);
}

function addCursorListeners(event) {
  event.chart.chartCursor.addListener("changed", handleCursorChange);
  event.chart.chartCursor.addListener("onHideCursor", handleHideCursor);
}

function syncZoom(event) {
  for (x in charts) {
    if (charts[x].ignoreZoom) {
      charts[x].ignoreZoom = false;
    }
    if (event.chart != charts[x]) {
      charts[x].ignoreZoom = true;
      charts[x].zoomToDates(event.startDate, event.endDate);
    }
  }
}

function handleCursorChange(event) {
  for (var x in charts) {
    if (event.chart != charts[x]) {
      charts[x].chartCursor.syncWithCursor(event.chart.chartCursor);
    }
  }
}

function handleHideCursor() {
  for (var x in charts) {
    if (charts[x].chartCursor.hideCursor) {
      charts[x].chartCursor.forceShow = false;
      charts[x].chartCursor.hideCursor(false);
    }
  }
}

Кто-нибудь знает, как реализовать диапазон в моем случае?заранее спасибо!

1 Ответ

0 голосов
/ 21 февраля 2019

Поскольку вы используете v3, я предполагаю, что вы имеете в виду направляющих . Диапазоны осей - это функция v4, которая может выполнить то же самое.

На объект диаграммы можно добавить направляющие, указав начальную / конечную точку, заливку, цвет линии и необязательный текст.Если вы рисуете направляющую на оси категорий, используйте date / toDate или category / toCategory.Если вы рисуете направляющую на оси значений, используйте value / toValue: 

guides: [{
  //date-based category axis guide
  date: "2019-02-20", 
  toDate: "2019-02-22",
  fillAlpha: .20,
  fillColor: "#ee7d01",
  label: "Category Axis guide",
  inside: true //move label inside instead of displaying it on the axis
}, {
  //value axis guide
  value: 10,
  toValue: 30,
  fillAlpha: .20,
  fillColor: "#10d7ee",
  label: "Value Axis guide",
  inside: false //keep label outside along the axis
}]

Codepen

...