任何图表中的附加或独立 xAxis
Additional or standalone xAxis in anycharts
我需要在图表上显示第二个 xAxis,但标签不同。我设法通过使用 chart.xAxis(1)
显示第二个 xAxis,但没有设法更改第二个轴的标签。第二个 xAxis 具有第一个的标签。
独立的 xAxis 可能是一个解决方案,但现在没有相关文档 (https://docs.anychart.com/Dashboards/Standalones#axes)。
如何更改第二个 xAxis 的标签?
编辑:我有一个数组(例如 ["2019-02-18", "2019-02-25"]),我想将其设置为 xAxis 的标签。
下面的演示可以帮助... 更多 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,但标签不同。我设法通过使用 chart.xAxis(1)
显示第二个 xAxis,但没有设法更改第二个轴的标签。第二个 xAxis 具有第一个的标签。
独立的 xAxis 可能是一个解决方案,但现在没有相关文档 (https://docs.anychart.com/Dashboards/Standalones#axes)。
如何更改第二个 xAxis 的标签?
编辑:我有一个数组(例如 ["2019-02-18", "2019-02-25"]),我想将其设置为 xAxis 的标签。
下面的演示可以帮助... 更多 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>