为什么Highcharts在两个相似的图表中的排名不同？ [英] Why is the Highcharts tick placement different in two similar charts?
问题描述
我有两个相似的Highcharts图表中有关点击位置的问题。在第一个示例中，我指定了 xAxis 属性，在第二个示例中，我指定了 x 和 y 值。数据是完全相同的，但你可以看到，蜱是不同的放置。我试着玩弄 tickmarkPlacement ， minPadding ， maxPadding 使第一个例子看起来像第二个例子，但没有成功。
有人可能告诉我两个图表，地点的时间如此不同，我如何使第一个例子看起来像第二个例子？
代码和jsFiddles：
第一个例子
代码：
$（'＃container'）。highcharts（
{
series：[
{
name：Series 1，
data：[
69.78，
2235.83，
69.78，
908.36，
69.78，
174.78
]，
color：＃0084cb，
opposite：false
}
] xAxis：{
categories：[
2015，
2016，
2017，
2018，
2019，
2020
]，
tickmarkPlacement：on
}
}
）;
图表：
http://jsfiddle.net/y71f7hhd/4/
不同之处是分类轴类型与线性轴类型。
分类轴类型为每个类别保留一个偶数空间块，这就是为什么在x轴的开始和结束处看到'extra'空间的原因。
如果您在图表上启用十字线，并将鼠标悬停在一个点上，它处理轴间距：
您可以使用最小和最大值来操作分类轴的方法之一是，
xAxis：{
min：0.4，
max：4.6，
...
示例：
- a href =http://jsfiddle.net/jlbriggs/fw9o4fjh/8/ =nofollow> http://jsfiddle.net/jlbriggs/fw9o4fjh/8/
它不是完全的，或者理想的，但是类别的工作原理是逻辑的，如果你想要你的图表像线性的例子，最好的事情是使用线性轴 - 或者，因为你在谈论日期，使用 datetime 轴类型。
在这两种情况下，您都可以使用 pointStart 和 pointInterval 属性来避免发送x值
示例：
I have a question regarding the tick placement in two similar Highcharts chart. In the first example, I have specified the xAxis property and in the second example I have specified an x and y value in the series. The data is exactly the same, but as you can see the ticks are placed differently. I have tried to play around with the tickmarkPlacement, minPadding, maxPadding to make the first example look like the second, but without success.
Could someone tell me wy the two charts, place ticks so different and how I could make the first example look like the second example?
The code and jsFiddles:
First Example
The code:
$('#container').highcharts(
{
"series": [
{
"name": "Series 1",
"data": [
69.78,
2235.83,
69.78,
908.36,
69.78,
174.78
],
"color": "#0084cb",
"opposite": false
}
],
"xAxis": {
"categories": [
"2015",
"2016",
"2017",
"2018",
"2019",
"2020"
],
"tickmarkPlacement": "on"
}
}
);
The chart:
http://jsfiddle.net/fw9o4fjh/5/
Second Example
The code:
$('#container').highcharts(
{
"series": [
{
"name": "Series 1",
"data": [
{
"y": 69.78,
"x": 2015
},
{
"y": 2235.83,
"x": 2016
},
{
"y": 69.78,
"x": 2017
},
{
"y": 908.36,
"x": 2018
},
{
"y": 69.78,
"x": 2019
},
{
"y": 174.78,
"x": 2020
}
],
"color": "#0084cb",
"opposite": false
}
]
}
);
The chart:
http://jsfiddle.net/y71f7hhd/4/
The difference is a categorical axis type vs a linear axis type.
The categorical axis type reserves an even block of space for each category, which is why you see 'extra' space at the start and end of the x axis.
If you enable crosshairs on the chart, and hover over a point, you will see a good illustration of how it treats the axis spacing:
categories: http://jsfiddle.net/jlbriggs/fw9o4fjh/6/
One of the things you can do to manipulate the categorical axis the way you want is to use the min and the max, like this:
xAxis: {
min:0.4,
max:4.6,
...
Example:
It's far from exact, or ideal, but the categories work the way they do for logical reasons, and if you want your chart to plot like the linear example, the best thing to do is use a linear axis - or, since you're talking about dates, use a datetime axis type.
In either case, you can use the pointStart and pointInterval properties to avoid having to send the x value in your data.
Example:
这篇关于为什么Highcharts在两个相似的图表中的排名不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
