i'm asking myself if it's possible to do multiple lines (in a single serie) that are overlapping. I couldn't find any example for that :(
I don't want this: Highcharts / Highstock step line without vertical "transition" lines?
If i have a set of value like that:
serie1 = [
[{x:5, y: 10}, {x:7, y: 10}], # segment 1
[{x:2, y: 12}, {x:9, y: 12}], # segment 2
]
I want to plot both lines which are in the same series so i can benefit from the interactivity (legend for example).
y
^
|
| ------------------segment2-------------------
| -----------segment1-------------
|
|---2-------5-------------------------------7-----9----------> x
______________________
| |
| Legend: - serie 1 |
|____________________| (I'm proud of my ASCII skills ! :D)
Is this possible ? Thanks
In general, each of series required sorted data by x-values. In your case it won't be sorted. So I would suggest to separate your data into different series and then connect series using linkedTo option. for example:
$('#container').highcharts({
series: [{
id: 'main',
data: [{
x: 5,
y: 10
}, {
x: 7,
y: 10
}]
}, {
data: [{
x: 2,
y: 12
}, {
x: 9,
y: 12
}],
linkedTo: 'main'
}]
});
And live demo: http://jsfiddle.net/24qf98xL/1/
It seemed like an interesting challenge: putting multiple segments into a single series. Not sure how its done in HighCharts, but I was able to accomplish it using ZingChart through the key value pairs feature.
In the series area, I included pairs of values in brackets for each line segment, where I wanted space, I placed null values.
var myChart = {
"graphset":[
{
"type":"line",
"title":{
"text":"Average Metric"
},
"plotarea":{
},
"scaleX":{
},
"scaleY":{
},
"plot":{
},
"series":[
{
"values":[[1,10],
[2,6],
null,
[1.5,4],
[3,7],
null,
[4.5,5],
[6.5,7],
null,
[4,6],
[5,7]],
"text":"Apple"
}
]
}
]
};
zingchart.render({
id : "myChart",
height : "300px",
width : "100%",
data : myChart
});<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>I'm on the ZingChart team so if you have any questions about how we created this example please feel free to reach out.
来源：https://stackoverflow.com/questions/26408027/highcharts-draw-multiple-segments-in-a-single-serie