2

Highchartsを使用して軽量のダッシュボードを作成したいと思います。まず、このグラフィックhttp://jsfiddle.net/jerryvermanen/Zr7zE/を見てください。

この視覚化でダッシュボードを作りたいです。ポイントをクリックすると、ビジュアライゼーションの下に追加情報が表示されます。たとえば、画像（.jpg）、この点に関する詳細情報、および特定のソースへのURLを表示したいと思います。

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        exporting: {
        enabled: false
        },
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'DAYS BETWEEN RELEASE AND CEREMONY',
    style: {
            fontSize: '22px'
        }
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            min: 0,
    reversed: true,
            title: {
                enabled: true,
                text: 'Days difference'
            },
            startOnTick: true,
            endOnTick: true,
           showLastLabel: true,
     plotLines: [{
            color: 'black',
            dashStyle: 'longdashdot',
            width: 1,
            value: 365,
            label: {
                text: 'ONE YEAR',
        y: 580,
        rotation: 0,
                textAlign: 'left',
            }            
        }]
        },
        yAxis: {
            min: 1929,
    max: 2012,
            title: {
                text: 'Year'
            },
            labels: {
                formatter: function() {
                    return this.value;
                }
            }
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
            }
        },
        legend: {
    enabled: false
        },
        credits: {
    enabled: false
    },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 4,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Nominees',
            marker: {
                symbol: 'circle'
            },

誰かがこのプロジェクトを手伝ってくれますか？

4

1 に答える 1

3

次のコードを使用して、クリック イベントをポイントにバインドできます。

plotOptions: {
    scatter: {
        point: {
            events: {
                click: function() {
                    // do what you want
                    // you can get the point reference using `this`
                }
            }
        }
    }
}

デモ

于 2012-12-26T19:06:23.013 に答える