2015-12-10 45 views
0

在highcharts類型的氣泡(X軸:日期,Y軸:人),我應該使用什麼選項,以使Y軸顯示每個人與水平線使其與X軸線相交併在相交處具有氣泡。 我使用人員列表作爲'類別',但看起來不太好。highcharts類型的氣泡與靜態的Y軸列表

$('#container').highcharts({ 

    chart: { 
     type: 'bubble', 
     plotBorderWidth: 1, 
     zoomType: 'xy' 
    }, 

    legend: { 
     enabled: false 
    }, 

    title: { 
     text: 'Chart' 
    }, 

    xAxis: { 
     type: 'datetime', 
     dateTimeLabelFormats: { // don't display the dummy year 
      month: '%e. %b', 
      year: '%b' 
     }, 

     gridLineWidth: 1, 
     title: { 
      text: 'Date' 
     } 
    }, 

    yAxis: { 
     categories: ['person A', 'person B', 'person C', 'person D', 'person E'], 

     startOnTick: false, 
     endOnTick: false, 
     title: { 
      text: 'People' 
     }, 
     maxPadding: 0.2 
    }, 

    tooltip: { 
     useHTML: true, 
     headerFormat: '<table>', 
     pointFormat: '<tr><th colspan="2"><h3>Title</h3></th></tr>' + 
      '<tr><th>Person:</th><td>{point.y}</td></tr>' + 
      '<tr><th>Date:</th><td>{point.x}</td></tr>' + 
      '<tr><th>Number of calls:</th><td>{point.z}</td></tr>', 
     footerFormat: '</table>', 
     followPointer: true 
    }, 

    plotOptions: { 
     series: { 
      dataLabels: { 
       enabled: true, 
       format: '{point.z} calls' 
      } 
     } 
    }, 

    series: [{ 
     data: [ 
      { x: Date.UTC(2003, 9, 21), y: 1, z: 13}, 
      { x: Date.UTC(2003, 9, 30), y: 2, z: 14}, 
      { x: Date.UTC(2003, 9, 21), y: 2, z: 16}, 
      { x: Date.UTC(2003, 9, 30), y: 1, z: 7}, 
      { x: Date.UTC(2003, 9, 21), y: 3, z: 5}, 
      { x: Date.UTC(2003, 9, 30), y: 4, z: 8 } 
     ] 
    }] 

}); 

chart 電流圖

Expected chart: 預期圖表(I越過需要的線被切換到的位置中的紅色)

+0

任何機會,以增加截圖與您所期望的結果? –

+0

當然,我補充說 – alloyoussef

回答

2

需要設置tickmarkPlacement作爲'on'值。

yAxis: { 
    categories: ['person A', 'person B', 'person C', 'person D', 'person E'], 
    tickmarkPlacement: 'on', 
    startOnTick: false, 
    endOnTick: false, 
    title: { 
    text: 'People' 
    }, 
    maxPadding: 0.2 
}, 

例子:http://jsfiddle.net/hqykwrjd/