3

私が取り組んでいるこのチャート グラフがあります。基本的には 10 行のセット [シリーズ] です。カスタム アイコン (画像) を各バーの先頭に動的に追加する必要があります。画像を広告することはできますが、すべての行に同じ mew 要素があります。これについて何か助けていただければ幸いです。

これは、私が作成した jsFiddle http://jsfiddle.net/KrTbz/です。

これは私が仕事をするために必要なjsコードです

            labels: {
                color: '#fff',

                x: 5,
                useHTML: true,
                formatter: function () {
                    return '<img class="" src="http://dummyimage.com/60x60/ff6600/ffffff"/>';
                }

            }

助けが得られることを願っています。

4

3 に答える 3

5

http://jsfiddle.net/troynt/KrTbz/3/を参照してください

ランダムな単語のプレースホルダーを任意の画像に置き換えるだけです。

formatter: function () {
    return {
        'Awesome': 'blah',
        'Awesome Previous': 'yadda',
        'Good': 'dabba',
        'Good Previous': 'doo',
        'Okay': 'word',
        'Okay Previous':'up',
        'Awful': 'blah',
        'Awfull Previous': 'blah2'
    }[this.value];
}
于 2012-11-15T02:51:39.987 に答える
4

ラベルごとにカスタム画像を適用するには、ラベルをインデックスとして画像の配列を使用して、これを試してください。

 $(function () {

        var categoryImgs = {
            'Apples': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;',
            'Oranges':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Pears':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Grapes':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;',
            'Bananas':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'
        };

        $('#container').highcharts({
            chart: {
                type: 'column'
            },

            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
                labels: {
                    x: 5,
                    useHTML: true,                        
                    formatter: function () {
                        return '<div class="myToolTip" title="Hello ' 
                       + this.value +'">' +  categoryImgs[this.value] + '</div>';
                    },

それが役立つことを願っています!

于 2014-02-19T21:59:10.883 に答える
2

さて、あなたはこれを試すことから始めることができます：

http://jsfiddle.net/KrTbz/1/

formatter: function () {
                    console.log(this);
                    return '<img class="" ' +
src="http://dummyimage.com/100x30/ff6600/ffffff?text=' + this.value + '" />';
                }

の値thisは現在描画されている線でthis.valueあり、ラベルが付いています。

Chromeでそれを実行し、F12キーを押してコンソールを表示すると、console.logがダンプするオブジェクト（完全なオブジェクト）を確認できます。

さらに違いが必要な場合は、その値で分岐できます。

于 2012-11-15T02:51:49.033 に答える