定製HighCharts - 改變的故事情節的高度，在特定的X和Y

Question

我想定製highcharts

1）我需要改變的故事情節的高度默認顯示的標記值

2 ）顯示標記圖像本身內的特定位置頂部的標記值（白圈內）

這是我迄今所取得

Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 
     /*function updateData(x,y) 
     { 
      var series = chart.series[0]; 
      series.addPoint([x, y], true, true); 
     }*/ 
var chart; 

$(function() { 
    var color = '#AA34FF'; 

    $('#container').highcharts({ 
     chart: { 
      events: { 
       load: function(event) { 
        _bindCustomEvents(); 
       } 
      }, 
      backgroundColor: 'transparent'   
     }, 

     series: [ 
      { 
       color: 
       { 
        linearGradient: 
        { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        }, 
        stops: 
        [ 
         /*[0, '#a83e3e'], 
           [0.21, '#d34e47'], 
           [0.40, '#edbb5a'], 
           [0.57, '#e2e57a'], 
           [0.76, '#8dcc63'], 
           [1, '#7ab237']*/ 
           [0, '#7ab237'], 
           [0.21, '#8dcc63'], 
           [0.40, '#e2e57a'], 
           [0.57, '#edbb5a'], 
           [0.76, '#d34e47'], 
           [1, '#a83e3e'] 
          ] 
         }, 
         lineWidth: 4, 
         marker: { 
          enabled: false, 
          fillColor: '#FFFFFF', 
          lineWidth: 2, 
          lineColor: null, 
         }, 
         type: 'spline', 
         data: [1, 2, 5, 3, 6, 7, 4], 
         backgroundColor: 'transparent', 
         plotShadow : false 
        }, 
        { 
         name: '', 
         marker: { 
          symbol: 'diamond' 
         }, 
         //same inmage for all points 
         marker: { 
          symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)' 
         }, 
         data: [8,8,8,8,8,8,8], 
         type:'scatter' 
        }, 
        { 
         name: '', 
         marker: { 
          symbol: 'diamond' 
         }, 
         //same inmage for all points 
         marker: { 
          symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)' 
         }, 
         data: [-1,-1,-1,-1,-1,-1,-1], 
         type:'scatter' 
        } 
       ], 
       xAxis: { 
        categories: [ 
         'Sun', 
         'Mon', 
         'Tue', 
         'Wed', 
         'Thu', 
         'Fri', 
         'Sat' 
        ], 
        title: { 
         enabled: true, 
         text: null, 
        }, 
        labels: { 
         style: { 
          fontFamily: 'gestaregular', 
          fontSize: '16px', 
          color:'#fff' 
         } 
        }, 
        plotLines: [ 
         { // mark the weekend 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 0, 
          dashStyle: 'dash', 
          zIndex:10 
         }, 
         { 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 1, 
          dashStyle: 'dash', 
          zIndex:10 
         }, 
         { 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 2, 
          dashStyle: 'dash', 
          zIndex:10 
         }, 
         { 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 3, 
          dashStyle: 'dash', 
          zIndex:10 
         }, 
         { 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 4, 
          dashStyle: 'dash', 
          zIndex:10 
         }, 
         { 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 5, 
          dashStyle: 'dash', 
          zIndex:10 
         }, 
         { 
          color: 'rgba(255,255,255,0.3)', 
          width: 1, 
          value: 6, 
          dashStyle: 'dash', 
          zIndex:10 
         }], 
        lineWidth: 0, 
        minorGridLineWidth: 0, 
        lineColor: 'transparent', 
       }, 
       yAxis: { 
        labels: { 
         enabled: false 
        }, 
        title: { 
         enabled: true, 
         text: null, 
        } 
       }, 
       legend: { 
        enabled: false 
       }, 
       minorTickLength: 0, 
       tickLength: 0 

      }); 

     }); 

function _bindCustomEvents() 
{ 
    var chart = $('#container').highcharts(); 
    chart.setTitle({ text: ''}); 
    $('.highcharts-axis').hide(); 
    $('.highcharts-grid').hide(); 
    $('.highcharts-axis').find('path').hide(); 
} 

FIDDLE LINK

這就是我希望它看起來像這樣的形式：頂圈中的'2'應該是中心樣條[1,2,5,3,6,7,4]的相應值，

Answer 1

1）plotLines是無限的。延伸至情節面積。因此，限制這一點，你怎麼樣改變你的yAxis最高：

yAxis: { 
    max: 8, 
    labels: { 
     enabled: false 
    }, 
    title: { 
     enabled: true, 
     text: null 
    } 
}, 

或者，你可以創建一個column一系列你想要的點和給他們你想要的高度一定的價值。使得列薄模仿你的plotLines將幫助像這樣：

series: [{ 
      name: '', 
      type: 'column', 
      pointWidth: 1, 
      borderWidth: 0, 
      data: [8, 8, 8, 8, 8, 8, 8] 
     }, 
... 

2）在圓（我猜）哪個值？ 「系列1：XX」？或整個工具提示？

編輯： 對於問題2，您可以使用dataLabel上的formatter函數爲散點圖系列（您的圓圈）執行此操作。下面是函數：

var customFormatPoint = function (pointX, seriesIndex) { 
    var theChart = $('#container').highcharts(); 
    var yValue = null; 
    var points = theChart.series[seriesIndex].options.data[pointX]; 
    return points; 
}; 

您從稱之爲：

series: [{ 
    name: '', 
    type: 'column', 
    pointWidth: 1, 
    borderWidth: 0, 
    dataLabels: { 
     enabled: true, 
     formatter: function() { 
      return customFormatPoint(this.point.x, 1); 
     } 
    }, 
    data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70] 
}, {... 

這裏的關鍵因素是，你有this.point.x這是散點的x軸位置。然後您需要發送包含要在dataLabel中顯示的y值的系列。

我也刪除了plotLines並創建了一個只包含寬度爲1且沒有邊框的條。我必須四處弄亂，以使杆的末端（其最大值）與散射圓直徑一致。

請參閱此jsFiddle。