1

HighCharts で積み上げ棒グラフと縦棒グラフを作成する方法を理解しました。ただし、次のように、バー/列の外側に矢印を配置してその中のポイントを示すことができるようにしたいと考えています。

これは HighCharts で可能ですか? その例が見つかりません。

4

3 に答える 3

5

もちろん可能です。

これを実現するには 2 つの方法があります。

  1. 散布図を使用します。

このアプローチでは、addl scatterchart series を作成します。散布図シリーズの値は、ここのように配置するのに役立ちますhttp://jsfiddle.net/p2MF6/

{
                name: 'indicator',
                data: [5],
                type: 'scatter',
                marker:{
                    //here you can have your url
                    symbol: 'circle',
                }
            }
  1. イメージをレンダリングします。

を使用chart.rendere.image(src,x,y,length,height)すると、チャート上の任意の画像をレンダリングできます。

座標を見つけることは大したことではありません。

これがあなたが探しているものであることを願っています

于 2013-10-26T11:05:40.723 に答える
1

例: http://jsbin.com/oyudan/276/edit

三角形と関数を追加して散布位置を変更します (マーカーに線を追加する場合は、返されたパスを変更するだけです)。

var chart;
$.extend(Highcharts.Renderer.prototype.symbols, {
    'triangle-left': function (a, b, c, d) {
        return ["M", a, b + d, "L", a, b, a + c / 2, b + d / 2, "Z"];
    }
});
Highcharts.updateMarketMarkers = function (chart,action) {
  /* get category width */
  var barWidth = chart.series[0].data[0].pointWidth / 2;
  for(var i = 0; i < chart.series[2].data.length; i++){
    var p =  chart.series[2].data[i];
    if(p.graphic){
       p.graphic[action]({
         x: p.plotX - barWidth - p.graphic.r
       });
    }
  }
};

呼び出す必要があるときに、その関数をチャートに追加します。

    chart: {
        renderTo: 'container',
        type: 'column',
        showAxes: false,
        events: {
            load: function () {
                Highcharts.updateMarketMarkers(this, 'attr');
            },
            redraw: function () {
                Highcharts.updateMarketMarkers(this,'attr');
            }
        }
    },
    plotOptions: {
      series: {
        events: {
          hide: function(e) { 
             Highcharts.updateMarketMarkers(this.chart,'animate'); 
          },
          show: function() {
             Highcharts.updateMarketMarkers(this.chart,'animate'); 
          }
        }
      }, 
    }
于 2013-10-28T10:56:41.683 に答える
0

本当にシンボルが必要な場合は、上記の回答のように散布シリーズのアプローチを使用します。

plotLine を描画することもできます:

http://api.highcharts.com/highcharts#yAxis.plotLines

もちろん、これには矢印は含まれませんが、この方法で線とラベルを描くことができます.IMO矢印はその時点では実際には必要ありません. FWIW

于 2013-10-27T14:39:16.523 に答える