Setting maximum and minimum xScale values in Anych

问题:

I am creating a line chart using 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>

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

But that returns an exception:

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

回答1:

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.