从highcharts 3.0移动到4.0：分组列行为
我一直在为Highcharts 2.x编写旧代码。3.0运行良好，但当移动到4.0时，我们看到了这种奇怪的行为： 如您所见，X轴上的每个周期都有两个堆叠的列。问题是第一列没有接触X轴，但它下面有某种填充。你知道怎么纠正吗 谢谢 以下是JS代码：从highcharts 3.0移动到4.0：分组列行为,highcharts,Highcharts,我一直在为Highcharts 2.x编写旧代码。3.0运行良好，但当移动到4.0时，我们看到了这种奇怪的行为： 如您所见，X轴上的每个周期都有两个堆叠的列。问题是第一列没有接触X轴，但它下面有某种填充。你知道怎么纠正吗 谢谢 以下是JS代码： chart = new Highcharts.Chart({ "chart": { "renderTo": "container", "defaultSeriesType": "column",
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container",
"defaultSeriesType": "column",
"marginTop": 100,
"marginBottom": 20,
"zoomType": "x",
"spacingRight": 20
},
"title": {
"text": "Activity Overview"
},
"subtitle": {
"text": "Grouped per week"
},
"xAxis": {
"type": "datetime",
"tickInterval": 604800000,
"tickWidth": 0,
"maxZoom": 1209600000,
"x": -30,
"labels": {}
},
"yAxis": [
{
"title": {
"text": "Days"
},
"endOnTick": false,
"maxPadding": 1,
"categories": [],
"index": 0
},
{
"gridLineWidth": 0,
"maxPadding": 1,
"categories": [],
"title": {
"text": "Number",
"style": {
"color": "#AA4643"
}
},
"labels": {
"style": {
"color": "#AA4643"
}
},
"opposite": true,
"index": 1
},
{
"gridLineWidth": 0,
"maxPadding": 0.8,
"endOnTick": false,
"lineWidth": 0,
"categories": [],
"opposite": true,
"tickLength": 0,
"max": 300,
"title": {
"text": ""
},
"labels": {
"text": ""
},
"index": 2
},
{
"gridLineWidth": 0,
"endOnTick": false,
"minPadding": 6,
"maxPadding": 0.5,
"lineWidth": 0,
"opposite": true,
"tickLength": 0,
"max": 100,
"min": 50,
"categories": [],
"title": {
"text": ""
},
"labels": {
"text": ""
},
"index": 3
}
],
"legend": {
"align": "left",
"verticalAlign": "top",
"y": 40,
"floating": true,
"borderWidth": 0
},
"tooltip": {
"shared": true,
"crosshairs": true,
"useHTML": true
},
"plotOptions": {
"column": {
"stacking": "normal"
},
"spline": {
"lineWidth": 1,
"dashStyle": "ShortDot",
"marker": {
"enabled": false,
"states": {
"hover": {
"enabled": true,
"radius": 4
}
}
}
}
},
"series": [
{
"name": "c1",
"stack": "survey",
"yAxis": 0,
"data": [
[
1406444400000,
7.3
],
[
1407049200000,
8.2
],
[
1407654000000,
7.8
],
[
1408258800000,
8.9
],
[
1408863600000,
6.7
],
[
1409468400000,
8
],
[
1410073200000,
8.4
],
[
1410678000000,
6.5
],
[
1411282800000,
6.6
],
[
1411887600000,
4.9
],
[
1412492400000,
1.8
]
],
"_colorIndex": 0
},
{
"name": "R1",
"stack": "survey",
"yAxis": 0,
"data": [
[
1406444400000,
4.2
],
[
1407049200000,
3.9
],
[
1407654000000,
3.9
],
[
1408258800000,
5.3
],
[
1408863600000,
3.2
],
[
1409468400000,
4.4
],
[
1410073200000,
3.1
],
[
1410678000000,
2.8
],
[
1411282800000,
2.8
],
[
1411887600000,
2.2
],
[
1412492400000,
0.9
]
],
"_colorIndex": 1
},
{
"name": "A1",
"stack": "survey",
"yAxis": 0,
"data": [
[
1406444400000,
1.8
],
[
1407049200000,
1.7
],
[
1407654000000,
1.5
],
[
1408258800000,
0.9
],
[
1408863600000,
1.7
],
[
1409468400000,
1.3
],
[
1410073200000,
1.3
],
[
1410678000000,
1.9
],
[
1411282800000,
1.2
],
[
1411887600000,
1.2
],
[
1412492400000,
0.4
]
],
"_colorIndex": 2
},
{
"name": "Nb R",
"type": "spline",
"color": "#AA4643",
"yAxis": 1,
"data": [
[
1406444400000,
3.7
],
[
1407049200000,
3.8
],
[
1407654000000,
4.1
],
[
1408258800000,
4.1
],
[
1408863600000,
3.6
],
[
1409468400000,
3.8
],
[
1410073200000,
3.8
],
[
1410678000000,
3.5
],
[
1411282800000,
3.8
],
[
1411887600000,
3.3
],
[
1412492400000,
3.1
]
],
"_symbolIndex": 0
},
{
"name": "P",
"stack": "rater",
"stacking": "percent",
"color": "#64E572",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
34.55
],
[
1407049200000,
23.84
],
[
1407654000000,
38.58
],
[
1408258800000,
27.78
],
[
1408863600000,
34.07
],
[
1409468400000,
33.75
],
[
1410073200000,
38.71
],
[
1410678000000,
38.07
],
[
1411282800000,
31.35
],
[
1411887600000,
27.95
],
[
1412492400000,
30
]
]
},
{
"name": "S",
"stack": "rater",
"stacking": "percent",
"color": "#508432",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
49.09
],
[
1407049200000,
49.01
],
[
1407654000000,
44.67
],
[
1408258800000,
50.56
],
[
1408863600000,
49.12
],
[
1409468400000,
51.25
],
[
1410073200000,
46.08
],
[
1410678000000,
42.64
],
[
1411282800000,
51.89
],
[
1411887600000,
56.52
],
[
1412492400000,
61.67
]
]
},
{
"name": "Su",
"stack": "rater",
"stacking": "percent",
"color": "#058DC7",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
3.64
],
[
1407049200000,
4.64
],
[
1407654000000,
1.52
],
[
1408258800000,
7.22
],
[
1408863600000,
3.98
],
[
1409468400000,
3.75
],
[
1410073200000,
0.92
],
[
1410678000000,
3.55
],
[
1411282800000,
3.24
],
[
1411887600000,
2.48
],
[
1412492400000,
3.33
]
]
},
{
"name": "F",
"stack": "rater",
"stacking": "percent",
"color": "#24CBE5",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
6.36
],
[
1407049200000,
10.6
],
[
1407654000000,
8.63
],
[
1408258800000,
6.11
],
[
1408863600000,
3.54
],
[
1409468400000,
3.13
],
[
1410073200000,
4.15
],
[
1410678000000,
5.08
],
[
1411282800000,
3.24
],
[
1411887600000,
6.83
],
[
1412492400000,
1.67
]
]
},
{
"name": "Pr",
"stack": "rater",
"stacking": "percent",
"color": "#DDDF00",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
null
],
[
1407049200000,
4.64
],
[
1407654000000,
1.02
],
[
1408258800000,
null
],
[
1408863600000,
0.88
],
[
1409468400000,
3.13
],
[
1410073200000,
2.3
],
[
1410678000000,
null
],
[
1411282800000,
null
],
[
1411887600000,
1.24
],
[
1412492400000,
null
]
]
},
{
"name": "Cl",
"stack": "rater",
"stacking": "percent",
"color": "#ED5618",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
null
],
[
1407049200000,
null
],
[
1407654000000,
1.02
],
[
1408258800000,
2.22
],
[
1408863600000,
0.44
],
[
1409468400000,
0.63
],
[
1410073200000,
0.92
],
[
1410678000000,
2.03
],
[
1411282800000,
1.08
],
[
1411887600000,
null
],
[
1412492400000,
null
]
]
},
{
"name": "Other",
"stack": "rater",
"stacking": "percent",
"color": "#FF9655",
"yAxis": 2,
"showInLegend": false,
"data": [
[
1406444400000,
6.36
],
[
1407049200000,
7.28
],
[
1407654000000,
4.57
],
[
1408258800000,
6.11
],
[
1408863600000,
7.96
],
[
1409468400000,
4.38
],
[
1410073200000,
6.91
],
[
1410678000000,
8.63
],
[
1411282800000,
9.19
],
[
1411887600000,
4.97
],
[
1412492400000,
3.33
]
]
},
{
"type": "line",
"name": "QoH",
"yAxis": 3,
"data": [
[
1406444400000,
96.5
],
[
1407049200000,
96.2
],
[
1407654000000,
94.7
],
[
1408258800000,
95.9
],
[
1408863600000,
95.1
],
[
1409468400000,
95.3
],
[
1410073200000,
96.3
],
[
1410678000000,
94.4
],
[
1411282800000,
96.6
],
[
1411887600000,
96.8
],
[
1412492400000,
98.1
]
],
"_colorIndex": 3,
"_symbolIndex": 1
}
]
});
这是因为左y轴在该级别具有0。 要修复它，您可以设置
startOnTick: false,
min: 0.5
示例：拉小提琴看起来不错。此处无法看到填充名称，使用最新的FF.jsfiddle链接是错误的。我已经用正确的版本更新了它，刚刚在3.x版本中测试了你的小提琴，它的工作方式完全相同，请参见：