Question

我需要在图表上显示第二个xAxis，但标签不同。我设法通过使用chart.xAxis(1)显示了另一个xAxis，但是没有设法更改第二个轴的标签。第二个xAxis具有第一个的标签。一个独立的xAxis可能是一个解决方案，但是现在没有文档（https://docs.anychart.com/Dashboards/Standalones#axes）。

如何更改第二个xAxis的标签？

编辑：我有一个要设置为xAxis标签的数组（例如[[2019-02-18“，” 2019-02-25“]）。

Answer 1

下面的演示可以帮助您...更多information here

更新：设置额外的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>

其他图表中的附加或独立xAxis

1 个答案: