與Highcharts構建儀表板

我想用Highcharts構建一個輕量級儀表板。首先，看這張圖片http://jsfiddle.net/jerryvermanen/Zr7zE/。與Highcharts構建儀表板

我想和這個可視化的儀表板。點擊某個點時，我想在可視化對象下方顯示其他信息。例如，我想顯示一張圖片（.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' 
      },

任何人都可以幫我解決這個項目嗎？

來源

2012-12-26 Jerry Vermanen

你能解決的jsfiddle鏈接？ –

完成。這是網址：http://jsfiddle.net/jerryvermanen/Zr7zE/ –

您可以使用下面的代碼綁定click事件的地步。

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

demo

來源

2012-12-26 19:06:23

與Highcharts構建儀表板

回答

相關問題