顯示系列的期望值和當前值的條形圖

Question

我想顯示如下所示的條形圖。條形圖有一個預期值分量，我需要顯示爲一條垂直線。我嘗試使用highchart和d3實現相同，但我無法根據需要顯示垂直線。

任何人都可以指導我如何去實現它。

Answer 1

你可以試試這個approach

series: [{ 
     name: 'Real data', 
     data: [107, 31, 635, 203, 2], 
     //pointPadding: 0.2, 
     borderWidth: 1, 
     borderColor: 'grey' 
    },{ 
     name: 'Limits', 
     data: [153, 156, 554, 408, 6], 
     color: 'transparent', 
     borderWidth: 1, 
     borderColor: 'grey' 
    }] 
    plotOptions: { 
     bar: { 
       grouping: false, 
      dataLabels: { 
       enabled: true 
      } 
     } 
    } 

並請提供一下你已經遠遠做到了這一點。這會讓你更容易幫助你。

Answer 2

通過組合條形圖和分組條形圖，我認爲可以獲取圖像中顯示的圖表。

here是我的樣本

series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
      type: 'bar', 
      color: 'transparent' 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], 
      type: 'bar', 
      color: '#00BB00' 
     },{ 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], 
      lineWidth: 0, 
       color: 'black', 
       marker: { 
       symbol: 'square', 
       width: 10, 
       height: 1 

      } 
     }] 

我希望這將有助於你得到你的圖表。

Answer 3

您可以擴展Highcharts標誌畫線標記，像這樣：

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

設置標記符號爲vline垂直線，hline爲一條水平線。

集lineWidth，lineColor，和radius性能以及：

plotOptions:{ 
    scatter:{ 
     marker:{ 
      symbol:'vline', 
      lineWidth:3, 
      radius:9, 
      lineColor:'#333' 
     } 
    } 
} 

實例：

• http://jsfiddle.net/jlbriggs/boL726bq/

• http://jsfiddle.net/jlbriggs/QM6kF/