在Anychart图中设置最大和最小xScale值会导致异常 [英] Setting maximum and minimum xScale values in Anychart graph results in an exception

问题描述

我正在使用 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值.我尝试了以下方法:

I need set the minimum and maximum xScale values for this graph. I have tried the following:

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

但这会返回一个异常:

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

推荐答案

折线图的默认xScale是顺序刻度.此比例类型表示逻辑类别，因此不支持最小值/最大值.您的数据与dateTime相关，在这种情况下，dataTime刻度更合适. 您可以将dateTime比例应用于图表并调整最小/最大.下面是修改后的JS代码:

The default xScale for the line chart is an ordinal scale. This scale type doesn't support min/max values as it represents logic categories. Your data is dateTime related, for this case the dataTime scale is more suitable. You can apply dateTime scale to your chart and adjust min/max. Below is your modified JS code:

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();
});

但是，如果您确实需要序数刻度类型，可以使用一个技巧.只需将以下行添加到您的代码中即可:

But if you really need the ordinal scale type, you can use a trick. Just add the following line to your code:

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

您可以在这篇文章中了解有关比例类型的更多信息.

You can learn more about scale types in the article.

这篇关于在Anychart图中设置最大和最小xScale值会导致异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！