3

初めてhighcharts.jsを使用しています。素晴らしくパワフルなようで、これまで楽しんできました。

ただし、縦棒グラフを少しセクシーに見せようとしていますが、少なくとも縦棒に繰り返し背景画像を使用することに関して、これを行う方法に関する情報を見つけるのに苦労しています。

ここに私が設計したものがあります：ここに画像の説明を入力

4

2 に答える 2

4

これを使用してパターンを追加できます

      color: {
                pattern: 'https://rawgithub.com/highslide-software/pattern-fill/master/graphics/pattern3.png',
                width: 6,
                height: 6
            }

seriesData のニーズに合わせて適宜変更します

デモ-ここでフィドル

ここに画像の説明を入力

于 2014-09-05T08:11:20.463 に答える
2

参考までに、Highcharts フォーラム ( http://highslide.com/forum/viewtopic.php?f=9&t=25673 )で同じ質問に回答しました。

まず、列にパターン塗りつぶしを使用するというアイデアがありました。基本的なデモは、Highcharts Uservoice サイト ( http://highcharts.uservoice.com/forums/55896-general/suggestions/2378007-allow-fill-patterns-for-areas-columns-plot-bands ) に投稿されました。

そのコードを改善して、グラデーション塗りつぶしで SVG パターンを作成できます。主な問題は、データ更新 (およびアニメーション) のサポートです。このため、グラデーション要素の固定幅を定義できません。以下のサンプル コードを参照してください。

Highcharts.Renderer.prototype.color = function (color, elem, prop) {

    if (color && color.pattern && prop === 'fill') {
        // SVG renderer
        if (this.box.tagName == 'svg') {
            var patternA,
                patternB,
                bgColor,
                bgPattern,
                image,
                id;

            id = 'highcharts-pattern-' + idCounter++;

            patternA = this.createElement('pattern')
            .attr({
                id: id,
                patternUnits: 'userSpaceOnUse',
                width: '100%',
                height: '100%'
            })
            .add(this.defs);

            patternB = this.createElement('pattern')
            .attr({
                id: id + '-image',
                patternUnits: 'userSpaceOnUse',
                width: color.width,
                height: color.width
            })
            .add(this.defs);

            image = this.image(color.pattern, 0, 0, 6, 6)
            .add(patternB);


            bgColor = this.rect(0, 0, 0, 0, 0, 0)
            .attr({
                fill: color.fill,
                width: '100%',
                height: '100%'
            })
            .add(patternA);


            bgPattern = this.rect(0, 0, 0, 0, 0, 0)
            .attr({
                fill: 'url(' + this.url + '#' + id + '-image)',
                width: '100%',
                height: '100%'
            })
            .add(patternA);

            return 'url(' + this.url + '#' + id + ')';

            // VML renderer
        } else {
            var markup = ['<', prop, ' type="tile" src="', color.pattern, '" />'];
            elem.appendChild(
            document.createElement(this.prepVML(markup)));
        }

    } else {
        return base.apply(this, arguments);
    }
};

ここで利用可能なライブデモ: http://jsfiddle.net/Kr82z/

于 2013-02-05T16:04:09.370 に答える