0

チャートのフィルターに影響を与えることができるように、ページの本文で html を使用したいと思います。私のチャートの凡例は、フィルタリングを別の方法 (反転) で処理できるようにわずかに変更されているため、この動作をそのまま維持したいと考えています。

これを行った例を見つけました...

function(chart){
    $(chart.series).each(function(i, serie){
        $('<li id="legendlinkstyle" style="color: '+serie.color+'">'+serie.name+'</li>').click(function(){
            serie.visible ? serie.hide() : serie.show();
        }).appendTo('#legend')
    })
}

しかし、リンクのテキストを編集したり、ホバーの色に影響を与えたりすることはできません。さらに、下の図のようにフィルター名のカテゴリごとにヘッダーを追加するなどの柔軟性が欲しいです。

ここに画像の説明を入力

javascript に何かを追加してから、何らかの形で html 本文にこのようなことを行う方法はありますか.... (クリックすると、凡例のフィルターが切り替わります)

<a href="functionhere();">CUSTOMIZE</a>
4

1 に答える 1

0

Highcharts には非常に強力な JavaScript API があり、実際に多くのことができます。ただし、上記のコードは必要なことを正確に実行します。少し改善する必要があります。別の（もう少し高度だと思います）例を見てください：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        series: [{
            id: 'earnings-above',
            name: 'above',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            id: 'earnings-inline',
            name: 'inline',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            id: 'earnings-below',
            name: 'below',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    }, function (chart) {

      // bind events to your own custom legend
      $('#my-legend').on('click', 'button', function (e) {
        var el = e.target,
            id = el.getAttribute('data-id'),
            series = chart.get(id);

        series.setVisible(!series.visible);
      });
    });
});

関連する HTML は次のとおりです。

<div id="container" style="height: 400px; min-width: 600px"></div>

<div id="my-legend">
  <strong>Earnings:</strong>
  <button data-id="earnings-above">above</button>
  <button data-id="earnings-inline">inline</button>
  <button data-id="earnings-below">below</button>
</div>

ご覧のとおり、凡例は個別にレンダリングされ、シリーズ ID を「data-id」属性に格納することでハイチャートにバインドするだけです。

ここで動作するデモを見つけることができます: http://jsfiddle.net/bk7Au/

于 2013-04-15T12:08:21.443 に答える