Javascript Highcharts:从特定范围开始绘制yAxis值
我正在使用highstocks,我想知道是否有任何方法可以从任意数字开始绘制列序列中的y值。例如我有一个名为NU(新用户)的列系列,它的第一个条目yAxis值为1000。目前,第一个条目从[0,1000]范围绘制在yAxis上。但我希望它是从[50006000]开始绘制的 我之所以要这样做,是因为NU本质上是另一个名为DAU(Daily Active Users)的专栏的一部分,我希望它能如此显示。DAU列系列的第一个条目的Y值为6000,6000-1000为5000;因此,我希望NU的这个条目从5000开始 这是我到目前为止所拥有的 我打算将DAU绘制为(原始DAU-NU),并将NU堆叠在DAU的顶部,但这意味着该系列中的DAU值不正确 这是我的密码Javascript Highcharts:从特定范围开始绘制yAxis值,javascript,jquery,highcharts,highstock,Javascript,Jquery,Highcharts,Highstock,我正在使用highstocks,我想知道是否有任何方法可以从任意数字开始绘制列序列中的y值。例如我有一个名为NU(新用户)的列系列,它的第一个条目yAxis值为1000。目前,第一个条目从[0,1000]范围绘制在yAxis上。但我希望它是从[50006000]开始绘制的 我之所以要这样做,是因为NU本质上是另一个名为DAU(Daily Active Users)的专栏的一部分,我希望它能如此显示。DAU列系列的第一个条目的Y值为6000,6000-1000为5000;因此,我希望NU的这个条目
$(document).ready(function() {
var all_series = [];
var accu_series;
var accu_data = [];
var pccu_series = [];
var pccu_data = [];
var dau_series;
var dau_data = [];
var nu_series;
var nu_data = [];
function draw_charts() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
buttons: [{
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
plotOptions: {
column: {
grouping: false
}
},
yAxis: [{
// Primary Y-Axis
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 0
}, {
// Secondary Y-Axis
opposite: true
}],
series : all_series
});
}
//Function that takes a record and fills the series data with that record
function fill_data(index, record) {
var date = new Date(record['dailyDate']);
var utc_date = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
accu_data[index] = [utc_date, parseFloat(record['accu'])];
dau_data[index] = [utc_date, parseFloat(record['dau'])];
nu_data[index] = [utc_date, parseFloat(record['users'])];
}
// //Function that sets up the series data for plotting
function fill_series() {
dau_series = {
name: "DAU",
type: "column",
data: dau_data,
stack: 0
};
all_series[0] = dau_series;
nu_series = {
name: "NU",
type: "column",
data: nu_data,
stack: 0
};
all_series[1] = nu_series;
}
//Pull data from API, format it, and store into the series arrays
(function() {
var result = '[{"accounts":"1668","accu":"568","activePayingRate":"1.97757","activePayingUsers":"854","activeUsers":"4905","area":"1","arpu":"34.6908","company":"45","dailyDate":"2013-08-06","dau":"6000","lost":"87","newUser":"0","paying":"96","payingRate":"1.53724","pccu":"747.0","registration":"572","sales":"3305.01","server":"1","users":"1000"},{"accounts":"1554","accu":"497","activePayingRate":"2.18398","activePayingUsers":"833","activeUsers":"4533","area":"1","arpu":"34.7479","company":"45","dailyDate":"2013-08-07","dau":"5873","lost":"89","newUser":"0","paying":"96","payingRate":"1.68568","pccu":"759.0","registration":"483","sales":"3300.04","server":"1","users":"1209"}]';
var json_result = JSON.parse(result);
$.each(json_result, function(index, record) {
fill_data(index,record);
});
fill_series();
draw_charts();
})();
});
您可以对列使用
low
属性,例如:
要显示正确的工具提示,请添加额外的属性,如val
,并使用pointFormat显示它
注意:当使用数据分组时,自定义属性将被删除,在这种情况下,我建议您创建自己的工具提示格式化程序,以显示您所需的内容。正是我想要的!