0

ウェブサイトに含めたいチャートのモックアップをいくつか作成しました。Highchartsを使用できればワクワクします。しかし、私たちが目にするHighchartsの作品の多くは、かなり同じように見えます...

Highchartsはどれだけカスタマイズ可能ですか？これらのモックアップとまったく同じように見えるチャートを作成するためにそれを使用できると考えられますか？例：

  • 移動平均
  • 高低を示す魅力的なドット
  • 純粋に装飾的なグラデーション
  • どの色の線が何を表すかを示す「キー」オーバーレイ

それで、あなたはどう思いますか？十分なJavascriptとスタイリングをハックすれば、Highchartsはこの正確な仕事に対応できますか？

モックアップ：http：//cl.ly/image/1f0m3l241e2S

4

1 に答える 1

1

はい、HighCharts を使えば間違いなくこれらのことができます。ここでの仕事のモットーは「何でも可能」です。

高値と安値を示す点については、次の例にあるような点に「記号」を使用する必要があります: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software /highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                y: 26.5,
                marker: {
                    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
                }
            }, 23.3, 18.3, 13.9, 9.6]

グラデーションの場合、SVG の「線形グラデーション」機能を使用して、背景色に適用できます。その例を次に示します: http://jsfiddle.net/WNDUH/10/そこで作業するのは、不透明度と色を変更するための「ストップ」です (高さを正しくするために 300 をいじります) :

fillColor : {
          linearGradient : [0, 0, 0, 300],
          stops : [
            [0, Highcharts.getOptions().colors[0]],
            [1, 'rgba(2,0,0,0)']
          ]
        },

キー オーバーレイに関しては、それが標準の凡例であり、絶対に次のように配置されています。ハイチャート/デモ/バー基本/

legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },

移動平均に関しては、それは基本的に独自の計算されたシリーズになります。

@nathancahillが言ったように、学習曲線がありますが、あなたが尋ねたことの多くは、HighChartsで何も「ハッキング」しなくても実行できるようです.

それがあなたを助けたことを願っています!

于 2013-03-21T14:16:59.033 に答える