試圖在圖表上繪製虛線

嘿，夥計們我試圖在我的高圖表上繪製虛線，但是當我嘗試這些圖形時，圖表或者將圖表推出了位置或者跳過圖表並繼續過去。「M還試圖把標籤貼在每個條形圖頂部太試圖在圖表上繪製虛線

這裏是我的代碼

$(function() { 
     $('#container5').highcharts({ 
      chart: { 
       type: 'column' 

      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      tooltip: { enabled: false }, 
      exporting: { 
        enabled:false 
       }, 

      credits: { 
        enabled: false 
       }, 

       legend: { 
        enabled:false 
       }, 
      xAxis: { 
       labels: 
        { 
         enabled: false 
        }, 
        lineColor: 'transparent', 
        minorTickLength: 0, 
         tickLength: 0, 
         min: 0, 
          lineWidth: 0, 
        minorGridLineWidth: 0, 
        lineColor: 'transparent', 

         gridLineColor: 'transparent', 
         title: { 
          text: '' 
         }, 
       categories: [''] 
      }, 
      yAxis: { 
       labels: 
        { 
         enabled: false 
        }, 
        lineColor: 'transparent', 
        minorTickLength: 0, 
         tickLength: 0, 
         min: 0, 
          lineWidth: 0, 
        minorGridLineWidth: 0, 
        lineColor: 'transparent', 


         gridLineColor: 'transparent', 
         title: { 
          text: '' 
         }, 
       min: 0, 
       title: { 
        text: ' ' 
       }, 

      }, 


      plotOptions: { 
       column: { 
        stacking: 'normal', 
        animation: false 

       }, 
       series: { 
        states: { 
         hover: { 
          enabled: false 
         } 
        } 
       } 
      }, 

      series: [{ 
       name: '10', 
       data: [10], 
       pointWidth: 50, 
       groupPadding: 0, 
       color: '#f7a35c' 
      }, { 
       name: '12', 
       data: [12], 
       pointWidth: 50, 
       groupPadding: 0, 
       color: '#004A98' 
      }, { 
       name: '12', 
       data: [12], 
       pointWidth: 50, 
       groupPadding: 0, 
       color: '#509ADC' 
      }] 
     }); 
    });

和

<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>

它看起來像

Picture one

，但我希望它看起來像這樣

Picture two

來源

2016-01-04 Kevin Gleeson

Deffine在這樣Y軸的情節線索。 Demo

yAxis: { 
    title: { 
     ... 
    }, 
    plotLines: [{ 
     value: minValue, 
     color: 'green', 
     dashStyle: 'shortdash', 
     width: 2, 
     label: { 
      text: 'Last quarter minimum' 
     } 
    }, { 
     value: maxValue, 
     color: 'red', 
     dashStyle: 'shortdash', 
     width: 2, 
     label: { 
      text: 'Last quarter maximum' 
     } 
    }] 
}

編輯

此外，如果你想的情節主線靠左對齊，你可以試試這個：

Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) { 
    return ['M',x*2,y + height,'L',0,y + width]; 
};

DEMO

來源

2016-01-04 12:24:43 Sapikelio

是否有反正我可以對齊這些plotline到左邊？ –

我已經嘗試過了，這很難，但你可以檢查我能做的所有事情，因爲它可以幫助你。 http://jsfiddle.net/m85yv3aq/9/ – Sapikelio

它可以幫助你嗎？ – Sapikelio

您可以使用Renderer.path在圖表中添加自定義行。

chart.renderer.path(['M', 0, 0, 'L', 100, 100]) 
    .attr({ 
     'stroke-width': 2, 
     stroke: 'red' 
    }) 
    .add();

來源

2016-01-05 10:20:05

你有這個jsFiddle的例子嗎？ –

在文檔中，您有一個使用渲染器的實時演示。 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-path/ –

試圖在圖表上繪製虛線

回答

相關問題