我们可以使用Highcharts创建多个x轴图表，例如this吗？ 如果是的话，有人可以提供一些指示吗？
显示三年数据。即2010,2011,2012
https://www.adr.com/DRDetails/CorporateActions?cusip=055622104
答案 0 :(得分：3)
使用highstocks（highcharts鲜为人知的兄弟姐妹），你可以做一些像你正在寻找的东西。看看这个fiddle
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'area',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'area',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
}）;
答案 1 :(得分：3)
旧的答案在JSFiddle中没有为我运行。 这是一个有效的例子，如果它可以帮助任何人：
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
opposite: true
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}, {
data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
pointStart: Date.UTC(2010, 0, 10),
pointInterval: 24 * 3600 * 1000, // one day
xAxis: 1
}]
});
});
答案 2 :(得分：1)
似乎可能，但在不同的观点。一个轴在顶部，另一个轴在底部。您设置与 true 相反，就像我们对y轴所做的那样。看看这个问题 Highcharts forum
<div id="container" style="height: 400px; width: 500px"></div>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
opposite: true
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
},{
data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
pointStart: Date.UTC(2010, 0, 10),
pointInterval: 24 * 3600 * 1000, // one day
xAxis: 1
}]
});
</script>
有关工作示例，请查看此jsfilddle
答案 3 :(得分：1)
您只需使用Highcharts分组类别插件，即可查看：https://github.com/blacklabel/grouped_categories
答案 4 :(得分：0)
你可能会经历这个小提琴https://jsfiddle.net/ajaytripathi10/z8mrwhxz/。希望这会有所帮助。
$(function () {
$('#container').highcharts({
title: {
text: 'Shared tooltip chart'
},
xAxis: [{
type: 'datetime',
id: 'x1'
}, {
type: 'datetime',
id: 'x2',
opposite: true
}],
yAxis: {
min: 0
},
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var tooltip = '';
var i, len;
tooltip += '<small>Apple</small>';
tooltip += '<table>';
for (i = 0, len = 4; i < len; i++) {
if(this.points[i] != undefined){
if(this.points[i].series.name.indexOf('Apple') >= 0){
tooltip += '<tr>';
tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
tooltip += '</tr>';
}
}
}
tooltip += '</table>';
tooltip += '<small>Mango</small>';
tooltip += '<table>';
for (i = 0, len = 4; i < len; i++) {
if(this.points[i] != undefined){
if(this.points[i].series.name.indexOf('Mango') >= 0){
tooltip += '<tr>';
tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
tooltip += '</tr>';
}
}
}
tooltip += '</table>';
return tooltip;
}
},
series: [{
name: 'Apple',
id: 'series1',
xAxis: 'x1',
color: 'rgba(255, 0, 0, 1.0)',
data: [5, 3, 4, 7, 6, 1, 0],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 10)
}, {
name: 'Apple New',
id: 'series2',
//linkedTo: 'series1',
xAxis: 'x2',
color: 'rgba(255, 180, 180, 1.0)',
data: [4, 5, 5, 6, 1, 3, 4],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 17)
},{
name: 'Mango',
id: 'series3',
xAxis: 'x1',
color: 'rgba(255, 0, 0, 1.0)',
data: [15, 13, 14, 17, 16, 11, 10],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 10)
}, {
name: 'Mango New',
id: 'series4',
//linkedTo: 'series1',
xAxis: 'x2',
color: 'rgba(255, 180, 180, 1.0)',
data: [14, 15, 15, 16, 11, 13, 14],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 17)
}]
});
}）;
答案 5 :(得分：0)
在列，饼图高图中制作水平和垂直线的完整代码
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="col-md-4" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="col-md-8">
<div id="container2" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6"></div><div id="container3" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6" class="col-md-6">dddd</div>
</div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'sample charts for both horizontal and vertical line'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
gridLineWidth: 1,
minPadding: 2,
maxPadding: 2,
maxZoom: 6 ,
categories: ['Jan', 'Feb', 'Apr', 'May', 'Jun',
'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return '$'+this.value;
}
},
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
// name: '',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}]
});
Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
Highcharts.chart('container3', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
</script>
</body>
</html>