gpt4 book ai didi

javascript - Highcharts - 多 Y 轴堆积图

转载 作者:行者123 更新时间:2023-12-04 23:48:28 26 4
gpt4 key购买 nike

我正在创建一个具有两个 Y 轴的图表 - 距离和持续时间。每个 Y 轴将有多个系列(运行、骑自行车、游泳等)堆叠在一起。持续时间是堆积区域或区域样条,距离是堆积柱形图。

这是图表的 jsfiddle。 http://jsfiddle.net/baberuth22/u5QCB/3/

$(function() {

var run_data = [[1324771200000,2928000],[1325376000000,2148000],[1327190400000,1001000],[1327795200000,2336000],[1329609600000,2403000],[1330214400000,2456000],[1330819200000,3615000],[1334448000000,1753000],[1338681600000,1998000],[1348358400000,1897000],[1350777600000,8130000],[1353801600000,9402000],[1354406400000,9612000],[1355011200000,4500000]];
var swim_data = [[1324771200000,1726000],[1348963200000,14520000],[1350777600000,15540000],[1352592000000,7380000],[1353801600000,4571000],[1354406400000,4500000]];
var bike_data = [[1327190400000,4289000],[1330214400000,4650000],[1330819200000,3655000],[1331424000000,2217000],[1334448000000,4349000],[1348963200000,4241000],[1350777600000,15014000],[1351382400000,4118000],[1353196800000,3362000],[1353801600000,11944000],[1354406400000,5997000]];
var strength_data = [[1324771200000,3275000],[1334448000000,600000],[1350777600000,4403000],[1351382400000,3339000],[1351987200000,4175000],[1353196800000,3754000],[1354406400000,3890000]];
var yoga_data = [[1351382400000,2656000],[1352592000000,609000]];
var other_data = [[1352592000000,309000],[1353196800000,186000]];



var run_distance_data = [[1324771200000,4],[1325376000000,3.1],[1327190400000,1.5],[1327795200000,3],[1329609600000,3.4],[1330214400000,3.5],[1330819200000,4.9],[1334448000000,2.5],[1338681600000,2.7],[1348358400000,2.6],[1350777600000,10.2],[1353801600000,7.6],[1354406400000,17.2],[1355011200000,10],[1331424000000,0],[1348963200000,0],[1351382400000,0],[1351987200000,0],[1352592000000,0],[1353196800000,0]];
var swim_distance_data = [[1324771200000,0.5],[1348963200000,1.5],[1350777600000,3.1],[1352592000000,0.2],[1353801600000,6.2],[1354406400000,3.1],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1351382400000,0],[1351987200000,0],[1353196800000,0],[1355011200000,0]];
var bike_distance_data = [[1327190400000,19.4],[1330214400000,20.2],[1330819200000,16.1],[1331424000000,9.9],[1334448000000,16.3],[1348963200000,16.1],[1350777600000,168],[1351382400000,15.5],[1353196800000,10.7],[1353801600000,47.2],[1354406400000,24],[1324771200000,0],[1325376000000,0],[1327795200000,0],[1329609600000,0],[1338681600000,0],[1348358400000,0],[1351987200000,0],[1352592000000,0],[1355011200000,0]];
var other_distance_data = [[1352592000000,3.1],[1353196800000,3],[1324771200000,0],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1348963200000,0],[1350777600000,0],[1351382400000,0],[1351987200000,0],[1353801600000,0],[1354406400000,0],[1355011200000,0]];

// one week - 604800000
var chart = new Highcharts.Chart({
chart: {
renderTo: 'graph1',
zoomType: 'x'
},
title: {
text: 'Workout Duration By Week'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime'

},
yAxis: [{
type: 'datetime',
//y-axis will be in milliseconds
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M',
day: '%H'
},
title: {
text: 'Duration (hours)'
},
min: 0

}
,
{
min: 0,
title: {
text: 'Distance ' + '(miles)'
},
opposite: true}
],

tooltip: {
formatter: function() {
var range_start_date = new Date(this.x);
//var range_start_date = new Date(this.x * 1000);
var range_end_date = new Date(range_start_date);
range_end_date.setDate(range_end_date.getDate() + 6);
var unix_end_datetime = range_end_date.getTime();
var return_string = '<b>' + this.series.name + '</b> ' + Highcharts.dateFormat('%b %e', this.x) + ' - ' + Highcharts.dateFormat('%b %e', unix_end_datetime) + '<br/>';

if (this.series.index <= 5){
return_string += Highcharts.dateFormat('%H hours %M minutes', this.y) + ' ';
}else{
return_string += this.y + ' (miles) ';
}

return return_string;
}
},
plotOptions: {
column: {
pointRange: 604800000,
stacking: 'normal'
},
area: {
stacking: 'normal'
}
},
series: [
{
name: 'Run',
data: run_data,
type: 'column'},
{
name: 'Swim',
data: swim_data,
type: 'column'},
{
name: 'Bike',
data: bike_data,
type: 'column'},
{
name: 'Strength',
data: strength_data,
type: 'column'},
{
name: 'Yoga',
data: yoga_data,
type: 'column'},
{
name: 'Other',
data: other_data,
type: 'column'}
,
{
name: 'Run',
data: run_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Swim',
data: swim_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Bike',
data: bike_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Other',
data: other_distance_data,
yAxis: 1,
type: 'area'

}
]
});


var d = new Date();
chart.xAxis[0].setExtremes(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7), Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
chart.showResetZoom();

});

这是最上面的图表。

堆叠似乎无法正常工作,我在 highcharts 演示页面上没有看到任何多轴堆叠示例。 http://www.highcharts.com/demo/combo-multi-axeshttp://www.highcharts.com/demo/column-stacked ,但不能同时使用。

如果我将两个轴都设置为“列”类型,则堆叠有效,但条形图彼此重叠。理想情况下,我希望背景中有一个半透明的面积图,前面有列。

最佳答案

我认为它实际上可以按照您的方式使用两个堆栈,但是区域系列的堆栈会中断,因为并非每个日期都存在数据点。因此,如果您在预处理时确保每个数据在区域系列中都有一个数据点,我认为它应该可行。

关于javascript - Highcharts - 多 Y 轴堆积图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13853636/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com