Balken als Pfeil mit Highcharts anzeigen

Question

Ist es möglich, mit Highcharts.js ein Säulendiagramm zu zeichnen, in dem ein Balken als Pfeil angezeigt wird?

Ich habe folgende Tabelle

$(function() { 

$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Title' 
    }, 
    xAxis: { 
     categories: [ 
      '2016', 
      '2017', 
      '2018' 
     ] 
    }, 
    yAxis: [{ 
     min: 0, 
     title: { 
      text: 'Header' 
     } 
    }, { 
     title: { 
      text: '' 
     }, 
     opposite: true 
    }], 
    legend: { 
     shadow: false 
    }, 
    tooltip: { 
     shared: true 
    }, 
    plotOptions: { 
     column: { 
      grouping: false, 
      shadow: false, 
      borderWidth: 0, 



     } 

    }, 
    series: [{ 
     name: 'Bar1', 
     color: 'rgba(165,170,217,1)', 
     data: [150, 73, 20], 
     pointPadding: 0.3, 
     pointPlacement: -0.0 
    }, { 
     name: 'Bar2', 
     color: 'rgba(126,86,134,.9)', 
     data: [140, 90, 40], 
     pointPadding: 0.4, 
     pointPlacement: -0.0 

    },{ 
     name: 'Bar3', 
     color: 'rgba(100,86,100,.9)', 
     data: [120, 70, 50], 
     pointPadding: 0.43, 
     pointPlacement: -0.0 
    },{ 
     name: 'Bar4', 
     color: 'rgba(126,86,100,.9)', 
     data: [100, 70, 50], 
     pointPadding: 0.43, 
     pointPlacement: -0.2 


    }] 
}); 

}); 

https://jsfiddle.net/hha2o3bu/ und ich mag, dass der letzte Takt als Pfeil oder mit einer Pfeilspitze angezeigt.

Danke für Ihre Hilfe.

Answer 1

Was ich vorschlagen würde, ist eine "Dummy" -Linie Serie mit einem Dreiecksmarker für Ihre Pfeilspitze hinzuzufügen. Ich habe die Inspiration dafür von einem Highcharts Forum erhalten, in dem ich eine ähnliche Frage gestellt habe (siehe http://forum.highcharts.com/highcharts-usage/creating-an-arrowhead-with-the-renderer-t27746/).

Hier ist der Code, den ich aufgearbeitet, mit Erklärungen, Kommentare zu dem, was jeder Teil tut:

/* dummy series */ 
{ 
    name: 'marker series', 
    type: 'line', 
    lineColor: 'transparent', /* makes line invisible */ 
    data: [null,null,50], /* use nulls where you don't want arrowheads to appear */ 
    showInLegend: false, /* will not show in legend */ 
    enableMouseTracking: false, /* users can't interact with the series */ 
    marker: { 
     symbol: 'triangle', 
     fillColor: 'rgba(126,86,100,.9)', /* match to the color of your column */ 
     radius:25 
    } 
} 

Siehe die Arbeits Geige an: https://jsfiddle.net/brightmatrix/hha2o3bu/2/

Ich hoffe, dass dies für Sie hilfreich ist!