Question

我正在使用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

Answer 1

折线图的默认xScale是顺序刻度。此比例类型表示逻辑类别，因此不支持最小值/最大值。您的数据与dateTime相关，在这种情况下，dataTime刻度更合适。您可以将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']);

您可以在Bismon中了解有关比例类型的更多信息。

在Anychart图中设置最大和最小xScale值会导致异常

1 个答案: