Установка максимального и минимального значений xScale на графике Anychart приводит к исключению - PullRequest
Новая
       30

Установка максимального и минимального значений xScale на графике Anychart приводит к исключению

0 голосов
/ 09 мая 2019

Я создаю линейный график, используя AnyChart 

anychart.onDocumentReady(function() {
  // create line chart
  var dataSet = anychart.data.set([
    [
      "24 Apr 2019",
      100.0
    ],
    [
      "24 Apr 2019", -100.0
    ],
    [
      "29 Apr 2019",
      100.0
    ],
    [
      "29 Apr 2019",
      100.0
    ],
    [
      "2 May 2019",
      100.0
    ],
    [
      "2 May 2019", -100.0
    ],
    [
      "3 May 2019",
      100.0
    ],
    [
      "6 May 2019", -100.0
    ],
  ]);

  chart = anychart.line();
  chart.animation(true);
  chart.crosshair()
    .enabled(true)
    .yLabel(false)
    .yStroke(null);
  chart.tooltip().positionMode('point');
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .padding([0, 0, 10, 0]);

  var seriesData_1 = dataSet.mapAs({
    'x': 0,
    'value': 1
  });

  var series_1 = chart.line(seriesData_1);

  series_1.name('Apple');
  series_1.color("#335FAB");
  series_1.hover().markers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_1.tooltip()
    .position('right')
    .anchor('left-center')
    .offsetX(5)
    .offsetY(5);

  chart.container('container');
  chart.draw();
});
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>

Мне нужно установить минимальное и максимальное значения xScale для этого графика. Я пробовал следующее: 

chart.xScale().minimum("2 April 2019");
chart.xScale().maximum("10 May 2019");

Но это возвращает исключение: 

TypeError: chart.xScale(...).minimum is not a function

1 Ответ

1 голос
/ 11 мая 2019

xScale по умолчанию для линейного графика - это порядковый масштаб.Этот тип шкалы не поддерживает минимальные / максимальные значения, поскольку представляет логические категории.Ваши данные связаны с датой и временем, в этом случае шкала данных больше подходит.Вы можете применить шкалу dateTime к вашему графику и настроить мин / макс.Ниже приведен ваш модифицированный код JS: 

anychart.onDocumentReady(function() {

  anychart.format.inputDateTimeFormat('dd MMM yyyy');

  // create line chart
  var dataSet = anychart.data.set([
    [
      "24 Apr 2019",
      100.0
    ],
    [
      "24 Apr 2019", -100.0
    ],
    [
      "29 Apr 2019",
      100.0
    ],
    [
      "29 Apr 2019",
      100.0
    ],
    [
      "2 May 2019",
      100.0
    ],
    [
      "2 May 2019", -100.0
    ],
    [
      "3 May 2019",
      100.0
    ],
    [
      "6 May 2019", -100.0
    ],
  ]);

  chart = anychart.line();
  chart.animation(true);
  chart.crosshair()
    .enabled(true)
    .yLabel(false)
    .yStroke(null);
  chart.tooltip().positionMode('point');
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .padding([0, 0, 10, 0]);

  var seriesData_1 = dataSet.mapAs({
    'x': 0,
    'value': 1
  });

  var series_1 = chart.line(seriesData_1);

  series_1.name('Apple');
  series_1.color("#335FAB");
  series_1.hover().markers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_1.tooltip()
    .position('right')
    .anchor('left-center')
    .offsetX(5)
    .offsetY(5);

  //adjust xScale
  var scale = anychart.scales.dateTime();
  scale.minimum(anychart.format.parseDateTime('2 April 2019', 'dd MMM yyyy'));
  scale.maximum(anychart.format.parseDateTime('10 May 2019', 'dd MMM yyyy'));
  chart.xScale(scale);

  chart.container('container');
  chart.draw();
});

Но если вам действительно нужен порядковый тип шкалы, вы можете использовать хитрость.Просто добавьте следующую строку в ваш код: 

chart.xScale().values(['2 April 2019', '24 Apr 2019', '29 Apr 2019', '2 May 2019', '3 May 2019', '6 May 2019', '10 May 2019']);

Подробнее о типах шкал вы можете узнать в статье .

...