Question

我问自己是否有可能做多个重叠的线（在一个系列中）。我无法找到任何例子:(

我不想要这个：Highcharts / Highstock step line without vertical "transition" lines?

如果我有一组这样的值：

serie1 = [
     [{x:5, y: 10}, {x:7, y: 10}], # segment 1
     [{x:2, y: 12}, {x:9, y: 12}], # segment 2

]

我想绘制同一系列中的两条线，以便我可以从交互性（例如传奇）中受益。

 y
 ^ 
 |
 |    ------------------segment2-------------------
 |           -----------segment1-------------
 |
 |---2-------5-------------------------------7-----9----------> x
        ______________________
        |                    |
        | Legend: - serie 1  |
        |____________________|                (I'm proud of my ASCII skills ! :D)

这可能吗？感谢

Answer 1

通常，每个系列都需要按x值排序数据。在您的情况下，它不会被排序。所以我建议将您的数据分成不同的系列，然后使用linkedTo选项连接系列。例如：

$('#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'
    }]
});

现场演示：http://jsfiddle.net/24qf98xL/1/

Answer 2

这似乎是一个有趣的挑战：将多个细分市场整合到一个系列中。不确定它是如何在HighCharts中完成的，但我能够通过键值对功能使用ZingChart完成它。

在系列区域中，我在每个线段的括号中包含了一对值，我想要空格，我放置了空值。

＆＃13;

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
        });

＆＃13;

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

＆＃13;

我是ZingChart团队的成员，如果您对我们如何创建此示例有任何疑问，请随时与我们联系。

HighCharts：在一个系列中绘制多个部分？

2 个答案: