【发布时间】：2016-09-30 11:45:53
【问题描述】：
我用两条不同的线制作了一个折线图，每条线都在 xAxis 中针对时间进行映射，但图中的点与 yAxis 不重合。标记中的值与刻度选项完全不匹配。我不确定出了什么问题。如果同时有两个数据点，就会发生这种奇怪的行为。我不知道该怎么办？图片如下：-
代码也可以在这里找到http://jsfiddle.net/Cp73s/5394/ 配置和数据如下：-
"options": {
"chart": {
"type": "line",
"zoomType": "yx",
"animation": true,
"spacingBottom": 15,
"spacingTop": 5,
"spacingLeft": 10,
"spacingRight": 10,
"reflow": true
},
"exporting": {
"enabled": false
},
"colors": ["#2C91DE", "#165A8E"],
"plotOptions": {
"line": {
"marker": {
"symbol": "circle"
}
},
"series": {
"stacking": "normal",
"marker": {
"lineWidth": 0,
"lineColor": null,
"enabled": true,
"radius": 5
}
}
},
"tooltip": {
"shared": true,
"crosshairs": true,
"followPointer": true,
"borderColor": null
}
},
"title": {
"text": "Blood Pressure"
},
"loading": false,
"xAxis": {
"startOnTick": true,
"endOnTick": true,
"tickInterval": 86400000,
"type": "datetime",
"title": {
"text": "Date/Time"
},
"labels": {
"rotation": -60,
"format": "{value:%m-%d-%Y}",
"align": "right"
}
},
"series": [{
"name": "Systolic",
"data": [{
"x": 1472980051000,
"y": 43,
"fillColor": "#e74c3c"
}, {
"x": 1472980051000,
"y": 34,
"fillColor": "#e74c3c"
}, {
"x": 1473066451000,
"y": 120,
"fillColor": "#e74c3c"
}, {
"x": 1473697392000,
"y": 119,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 120,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 120,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 114,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 114,
"fillColor": "#2ecc71"
}, {
"x": 1474548167000,
"y": 95,
"fillColor": "#f1c40f"
}, {
"x": 1474647485000,
"y": 106,
"fillColor": "#f1c40f"
}, {
"x": 1474647535000,
"y": 106,
"fillColor": "#f1c40f"
}, {
"x": 1474654052000,
"y": 93,
"fillColor": "#f1c40f"
}]
}, {
"name": "Diastolic",
"data": [{
"x": 1472980051000,
"y": 53,
"fillColor": "#e74c3c"
}, {
"x": 1472980051000,
"y": 120,
"fillColor": "#e74c3c"
}, {
"x": 1473066451000,
"y": 32,
"fillColor": "#e74c3c"
}, {
"x": 1473697392000,
"y": 70,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 80,
"fillColor": "#2ecc71"
}, {
"x": 1473710858000,
"y": 80,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 68,
"fillColor": "#2ecc71"
}, {
"x": 1473711048000,
"y": 68,
"fillColor": "#2ecc71"
}, {
"x": 1474548167000,
"y": 55,
"fillColor": "#f1c40f"
}, {
"x": 1474647485000,
"y": 57,
"fillColor": "#f1c40f"
}, {
"x": 1474647535000,
"y": 59,
"fillColor": "#f1c40f"
}, {
"x": 1474654052000,
"y": 54,
"fillColor": "#f1c40f"
}]
}],
"yAxis": {
"title": {
"text": "mmHg"
}
}
}
【问题讨论】：
-
他们为什么要这样做？轴标签标记有规律的间隔 - 每天的开始。您的数据点在那些日子的特定时间绘制事件，并相应地放置。这不是奇怪的行为，而是预期的行为 - 点被绘制在您告诉图表绘制它们的位置。您希望在您的场景中看到什么行为？
-
@jlbriggs 所以你能帮我理解如何得到一个正确的图表而不是这个。我想要这些在适当的时间和间隔可能会有所不同，但我不想要这种行为。另一方面，任何文件也会有所帮助。我也为此竖起了小提琴。谢谢
-
@jlbriggs 我想查看折线图，以便点显示 yAxis 中的确切值。请帮忙。
-
好吧，你必须定义什么是“正确的”图表：) 再次 - 图表在适当的时间绘制它们，但这似乎是你的抱怨。您必须选择 1) 以适当的 x 值绘制所有点，或 2) 按顺序绘制所有点而不考虑它们的适当时间。如果你的时间间隔不同，你肯定不能两者兼得。
-
如果您的主要目标是使 x 轴刻度与每个点对齐，请使用
tickPositions属性或tickPositioner函数 - api.highcharts.com/highcharts/xAxis.tickPositions | api.highcharts.com/highcharts/xAxis.tickPositioner
标签： javascript jquery html charts highcharts