我用StockChart创建了一个图表,我试图扩大该系列的cropThreshold,但没有成功。 当我使用HighCharts实现时,它会按预期工作。 StockChart / HighChart的示例: -JSFiddle
(要查看两个实现之间的区别,只需将第4行更改为第5行)
$(function() {
Highcharts.stockChart('container', {
/* Highcharts.chart({ */
chart: {
renderTo: 'container'
},
title: {
text: 'Project wise Budget Estimation'
},
navigation: {
buttonOptions: {
enabled: false
}
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
tickInterval: 15 * 60 * 1000,
type: 'datetime',
min: 1530385200000,
max: 1530394200000
},
yAxis: {
min: 0,
opposite: false,
tickColor: '#95989A',
tickWidth: 1,
tickLength: 10,
visible: true,
tickInterval: 60,
title: {
text: 'Amount Distribution'
}
},
legend: {
shadow: false
},
tooltip: {
},
plotOptions: {
column: {
stacking: 'normal',
cropThreshold: 150
}
},
series: [
{
name: 'targetName',
showInLegend: true,
data: [
[1530385200000,500],[1530386100000,500],[1530387000000,500],[1530387900000,500],[1530388800000,500],[1530389700000,500],[1530390600000,400],[1530391500000,450],[1530392400000,550],[1530393300000,500],[1530394200000,650],[1530395100000,500],[1530396000000,500],[1530396900000,550],[1530397800000,500],[1530398700000,500],[1530399600000,700],[1530400500000,650],[1530401400000,800],[1530402300000,500],[1530403200000,500],[1530404100000,300],[1530405000000,250],[1530405900000,200],[1530406800000,350],[1530407700000,150],[1530408600000,770],[1530409500000,800],[1530410400000,500],[1530411300000,500],[1530412200000,500],[1530413100000,500],[1530414000000,500],[1530414900000,500],[1530415800000,500],[1530416700000,500],[1530417600000,500],[1530418500000,500],[1530419400000,500],[1530420300000,500],[1530421200000,500],[1530422100000,500],[1530423000000,500],[1530423900000,500],[1530424800000,500]
],
zIndex: 2
},
{
name: 'deviationName',
showInLegend: true,
data: [
[1530385200000,450,550],[1530386100000,450,550],[1530387000000,450,550],[1530387900000,450,550],[1530388800000,450,550],[1530389700000,450,550],[1530390600000,360,440],[1530391500000,405,495],[1530392400000,495,605],[1530393300000,450,550],[1530394200000,585,715],[1530395100000,450,550],[1530396000000,450,550],[1530396900000,495,605],[1530397800000,450,550],[1530398700000,450,550],[1530399600000,630,770],[1530400500000,585,715],[1530401400000,720,880],[1530402300000,450,550],[1530403200000,450,550],[1530404100000,270,330],[1530405000000,225,275],[1530405900000,180,220],[1530406800000,315,385],[1530407700000,135,165],[1530408600000,693,847],[1530409500000,720,880],[1530410400000,450,550],[1530411300000,450,550],[1530412200000,450,550],[1530413100000,450,550],[1530414000000,450,550],[1530414900000,450,550],[1530415800000,450,550],[1530416700000,450,550],[1530417600000,450,550],[1530418500000,450,550],[1530419400000,450,550],[1530420300000,450,550],[1530421200000,450,550],[1530422100000,450,550],[1530423000000,450,550],[1530423900000,450,550]
],
type: 'arearange',
linkedTo: ':previous',
zIndex: 0
},
{
name: 'periodsName',
showInLegend: false,
type: 'column',
cropThreshold: 150,
zIndex: 1,
pointInterval: 24 * 3600 * 1000,
data: [
{"x":1530385200000,"y":400,"colorIndex":55},{"x":1530386100000,"y":400,"colorIndex":55},{"x":1530387000000,"y":400,"colorIndex":55},{"x":1530387900000,"y":480,"colorIndex":56},{"x":1530388800000,"y":495,"colorIndex":56},{"x":1530389700000,"y":510,"colorIndex":56},{"x":1530390600000,"y":700,"colorIndex":57},{"x":1530391500000,"y":650,"colorIndex":57},{"x":1530392400000,"y":300,"colorIndex":55},{"x":1530393300000,"y":660,"colorIndex":57},{"x":1530394200000,"y":400,"colorIndex":55},{"x":1530395100000,"y":500,"colorIndex":56},{"x":1530396000000,"y":500,"colorIndex":56},{"x":1530396900000,"y":200,"colorIndex":55},{"x":1530397800000,"y":490,"colorIndex":56},{"x":1530398700000,"y":500,"colorIndex":56},{"x":1530399600000,"y":400,"colorIndex":55},{"x":1530400500000,"y":300,"colorIndex":55},{"x":1530401400000,"y":200,"colorIndex":55},{"x":1530402300000,"y":500,"colorIndex":56},{"x":1530403200000,"y":480,"colorIndex":56},{"x":1530404100000,"y":670,"colorIndex":57},{"x":1530405000000,"y":755,"colorIndex":57},{"x":1530405900000,"y":680,"colorIndex":57},{"x":1530406800000,"y":710,"colorIndex":57},{"x":1530407700000,"y":670,"colorIndex":57},{"x":1530408600000,"y":400,"colorIndex":55},{"x":1530409500000,"y":400,"colorIndex":55},{"x":1530410400000,"y":500,"colorIndex":56},{"x":1530411300000,"y":400,"colorIndex":55},{"x":1530412200000,"y":510,"colorIndex":56},{"x":1530413100000,"y":400,"colorIndex":55},{"x":1530414000000,"y":490,"colorIndex":56},{"x":1530414900000,"y":400,"colorIndex":55},{"x":1530415800000,"y":400,"colorIndex":55},{"x":1530416700000,"y":590,"colorIndex":57},{"x":1530417600000,"y":590,"colorIndex":57},{"x":1530418500000,"y":600,"colorIndex":57},{"x":1530419400000,"y":620,"colorIndex":57},{"x":1530420300000,"y":400,"colorIndex":55},{"x":1530421200000,"y":600,"colorIndex":57},{"x":1530422100000,"y":600,"colorIndex":57},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55},{"x":1530423000000,"y":600,"colorIndex":57},{"x":1530423900000,"y":400,"colorIndex":55}
]
},
{
name: 'withinTarget',
type: 'column',
showInLegend: true,
data: []
},
{
name: 'belowTarget',
type: 'column',
showInLegend: true,
data: []
},
{
name: 'overTarget',
type: 'column',
showInLegend: true,
data: []
}],
scrollbar: {
enabled:true,
/* liveRedraw: false, */
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
}
});
});
答案 0 :(得分:0)
此行为是由 dataGrouping 引起的,您可以将其禁用。还值得注意的是您的数据未排序。
plotOptions: {
series: {
stacking: 'normal',
cropThreshold: 150,
dataGrouping: {
enabled: false
}
}
}
实时示例:http://jsfiddle.net/BlackLabel/2ma3yhv1/
API参考:https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.enabled