Дополнительный или автономный xAxis в любых чартах - PullRequest
Новая
       19

Дополнительный или автономный xAxis в любых чартах

0 голосов
/ 25 марта 2019

Мне нужно отобразить второй xAxis на моем графике, но с разными метками. Мне удалось отобразить второй xAxis с помощью chart.xAxis(1), но мне не удалось изменить метки второй оси. Второй xAxis имеет метки первого. Автономная xAxis может быть решением, но сейчас нет документации по этому вопросу (https://docs.anychart.com/Dashboards/Standalones#axes).

Как изменить метки второго xAxis?

Редактировать: у меня есть массив (например, ["2019-02-18", "2019-02-25"]), который я хочу установить в качестве меток xAxis.

1 Ответ

0 голосов
/ 25 марта 2019

Демоверсия ниже может помочь ... больше информации здесь

ОБНОВЛЕНИЕ: установить дополнительную ось X и впоследствии поменять метки в соответствии с комментарием спрашивающего. 

anychart.onDocumentReady(function() {

  // JSON data
  var json = {
    // chart settings
    "chart": {

      // chart type
      "type": "column",

      // set chart title
      "title": "JSON Data Set. Multiple Series",

      // series settings
      "series": [{
        "seriesType": "line",

        // first series data
        "data": [
          {            "x": "P1",            "value": "128.14"          },
          {            "x": "P2",            "value": "112.61"          },
          {            "x": "P3",            "value": "163.21"          },
          {            "x": "P4",            "value": "229.98"          },
          {            "x": "P5",            "value": "90.54"          }
        ]
      }, {
        "seriesType": "line",

        // second series data
        "data": [
          {            "x": "P1",            "value": "290.54"          },
          {            "x": "P2",            "value": "604.19"          },
          {            "x": "P3",            "value": "650.67"          },
          {            "x": "P4",            "value": "620.43"          },
          {            "x": "P5",            "value": "600.34"          }
        ]
      }],
      // chart container
      "container": "container"
    }
  };

  // get JSON data
  var chart = anychart.fromJson(json);

  // draw chart
  chart.draw();


  chart.xAxis().title("Basic X Axis");

  chart.xAxis().labels().format(val => {
    switch (val.value) {
      case 'P1':
        return '2000 Jan';
      case 'P2':
        return '2000 Feb';
      case 'P3':
        return '2000 Mar';
      case 'P4':
        return '2000 Apr';
      case 'P5':
        return '2000 May';
      default:
        return val.value;
    }
  })

  chart.xAxis(1).title("Extra X Axis");
  chart.xAxis(1).labels().format(val => {
    switch (val.value) {
      case 'P1':
        return '2001 Jan';
      case 'P2':
        return '2001 Feb';
      case 'P3':
        return '2001 Mar';
      case 'P4':
        return '2001 Apr';
      case 'P5':
        return '2001 May';
      default:
        return val.value;
    }
  })


});
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>

<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.css" rel="stylesheet" />
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" rel="stylesheet" />

<div id="container"></div>
...