2016-05-10 26 views
1

ハイチャート.jsでカラムバーチャートを描画できますか?ここでは、1つのバーが矢印として表示されますか?ハイチャートで矢印として表示バー

私はチャート

$(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/次ていると私は、最後のバーが矢印として、あるいは矢印の先端で表示します。

ありがとうございました。

+2

私は、レンダラー機能になります。私は最初の場所でこの表示の有用性を疑問視けどhttp://api.highcharts.com/highcharts#Renderer。 – jlbriggs

+0

リクエストされたチャートのモックアップを投稿してください。 –

答えて

1

私が示唆しているのは、あなたの矢頭に三角形のマーカーが付いた「ダミー」線シリーズを追加することです。私はHighchartsフォーラムのポストから同様の質問(http://forum.highcharts.com/highcharts-usage/creating-an-arrowhead-with-the-renderer-t27746/参照)を求めるインスピレーションを得ました。

ここでのコードは、私は各部分が何をするかにコメントとして説明し、後処理します:私はこれがあなたのために役立つことを願うhttps://jsfiddle.net/brightmatrix/hha2o3bu/2/

/* 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 
    } 
} 

はで作業フィドルを参照してください!

enter image description here

関連する問題