javascript - Creating a histogram with distribution curve, where the curve series is larger than the bin series - Stack Overflow

admin管理员组

文章数量:1305231

I want to create a histogram in Highcharts. The bin series has about 8 elements. The series for the the distribution curve has about 200 elements. Since Highcharts infers the xAxis from the number of elements in the series, the xAxis stretches out to 200. How do I get the curve series to fit to the bin series on the xAxis?

I want to create a histogram in Highcharts. The bin series has about 8 elements. The series for the the distribution curve has about 200 elements. Since Highcharts infers the xAxis from the number of elements in the series, the xAxis stretches out to 200. How do I get the curve series to fit to the bin series on the xAxis?

• javascript
• charts
• highcharts
• data-visualization

Share Improve this question Follow asked Dec 20, 2013 at 18:41 BrianMBrianM 17333 silver badges1414 bronze badges 6

• Did you see this response: stackoverflow./questions/18042165/…? – wergeld Commented Dec 20, 2013 at 19:07
• Yes, if the size of the series were equal, then I wouldn't have this issue. The reason the distribution curve is so large is because defined the curve much better than a series with only 8 points. – BrianM Commented Dec 20, 2013 at 19:19
• But, if the xAxis values are on the same scale it should still fit. You may need to null/zero your bins for the xAxis points with no matching data such that the 2 series use the same scale. Can you set up a representative jsFiddle? – wergeld Commented Dec 20, 2013 at 19:25
• Yeah I can. I'm currently grabbing the data via an ajax request through a web service. I can can set up an example with a hardcoded series. – BrianM Commented Dec 20, 2013 at 19:44
• 1 Updated jsFiddle: jsfiddle/wergeld/Dd9Py. You just needed to tell it what framework (I chose jQuery) and also include reference to highcharts. – wergeld Commented Dec 20, 2013 at 21:09

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 7

I would suggest using 2 x axes for this. It is far easier than trying to make the points match on a single axis.

See my example here:

http://jsfiddle/FnhRV/19/

Well, first I advice to get familiar with Highcharts docs/tutorials. Like this one.

In general, you can manage distance between points, it's called pointInterval, for example: http://jsfiddle/Dd9Py/1/

When you have 8 columns, on xAxis you should have scale - according to pair [x,y] of values.

Another solution is to use two different xAxis, one for column and one for spline. Example: http://jsfiddle/Dd9Py/2/

Looking at this jsFiddle. Things I notice is that your xAxis is linear - meaning that each point is plotted consecutively. So, since your bar series only has 8 points they are plotted int he first 8 positions. Your curve contains 200 points and are also plotted first e first served. You need to link up your xAxis so that each series is linked. What are your xAxis increments/categories?

本文标签：