2016-09-22 2 views
1

Ich habe ein Diagramm, das vom Typ Spalte Bereich ist und meine Anforderung ist es, eine Linie zu haben, die zwei Kategorien verbindet.Highcharts - Linie zwischen zwei Kategorien

JsFiddle

$(function() { $('#container').highcharts({ 
chart: { 
    type: 'columnrange', 
    inverted: true 
}, 
title: { 
    text: 'Test' 
}, 
subtitle: { 
    text: 'Sample' 
}, 
xAxis: { 
    categories: ['Jan', 'Feb', 'Mar'], 
    visible: false 
}, 
yAxis: { 
    visible: false 
}, 
legend: { 
    enabled: false 
}, 
series: [{ 
    name: 'Series1', 
    data: [ 
    [0, 3], 
    [0, 3], 
    [0, 3] 
    ], 
    pointPlacement: -0.20, 
    pointWidth: 50 
}, { 
    name: 'Series2', 
    data: [ 
    [3, 6], 
    [3, 6], 
    [3, 6] 
    ], 
    pointPlacement: 0, 
    pointWidth: 1 
}, { 
    name: 'Series3', 
    data: [ 
    [6, 9], 
    [6, 9], 
    [6, 9] 
    ], 
    pointPlacement: 0.20, 
    pointWidth: 50 
}] });}); 

Wie zeichne ich eine Linie von einer Kategorie zur anderen? Ist eine Eigenschaft verfügbar?

+2

Sie können in diesem Fall neue Zeilenreihen hinzufügen: http://jsfiddle.net/ebtygovh/6/ Sie können auch renderer.path http: //api.highcharts verwenden .com/highcharts/Renderer.path Wenn mein Kommentar dich treffen wird Ihre Anforderungen werde ich es als Antwort posten –

+0

@ GrzegorzBlachliński das ist, was ich gesucht habe. Es ist ein guter Start für mich .. Danke! Bitte schreiben Sie eine Antwort ... – damseldeebi

Antwort

1

Sie sollten in der Lage sein, ähnliche Tabelle zu erreichen, indem einfach neue Linie Reihe zu Ihrem Diagramm hinzufügen:

{ 
     name: 'Series4', 
     type: 'line', 
     marker: { 
     enabled: false 
     }, 
     index: 1, 
     data: [ 
     [0, 1.5], 
     [1, 1.5], 
     [2, 1.5] 
     ], 
    }, 

Hier sehen Sie ein Beispiel sehen, wie dieses Diagramm kann funktionieren: http://jsfiddle.net/ebtygovh/6/

Sie können auch verwenden renderer.path zum Hinzufügen von Zeilen zu Ihrem Diagramm: http://api.highcharts.com/highcharts/Renderer.path

Verwandte Themen