如何在高圖中創建虛線條形圖

我必須使用highcharts創建條形圖，如附圖所示。圖像中的圖形是使用Excel創建的。但是Highcharts似乎並沒有提供這樣的功能。雖然它允許使用模式創建圖形，但對這些模式沒有太多控制。任何人都可以確認我們是否可以在高層建築中創建類似的圖表？我在http://jsfiddle.net/sandeepkparashar/6c48x39v/3/Dashed Bar Chart 如何在高圖中創建虛線條形圖

來源

2016-11-10 user3560659

我會看看這個插件：http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill – jlbriggs

我已經看過這個插件，但他們似乎不履行我的在我需要動態顏色模式的意義上，這是一種需求。 – user3560659

好的，客戶端已經準備妥協，我們可以用虛線邊框顯示「Not Mitigated」欄。有人可以請建議如何做到這一點（請參考問題中給出的JS小提琴鏈接）？ – user3560659

正如有人評論提到創建了highcharts樣品小提琴，pattern-fill plugin可以處理這個問題。您可以創建模式並映射該系列，因此每個第二列將具有相應的模式。

var colors = ["#FF0000", "#FF8C00", "#FFFF00", "#00FF00", "#3366FF"]; 

var series = [{ 
    "color": "#FF0000", 
    "name": "High", 
    "data": [298, 199, 448, 271, 772, 494, 935, 562] 
}, { 
    "color": "#FF8C00", 
    "name": "Medium High", 
    "data": [130, 32, 234, 172, 159, 134, 218, 160] 
}, { 
    "color": "#FFFF00", 
    "name": "Medium", 
    "data": [141, 163, 95, 63, 71, 22, 26, 13] 
}, { 
    "color": "#00FF00", 
    "name": "Medium Low", 
    "data": [42, 8, 34, 19, 16, 20, 21, 26] 
}, { 
    "color": "#3366FF", 
    "name": "Low", 
    "data": [4, 4, 0, 0, 0, 0, 0, 0] 
}]; 

function getPatterns(colors) { 
    return colors.map(function(color, i) { 
    return { 
     id: 'custom-pattern-' + i, 
     path: { 
     d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11', 
     stroke: color 
     } 
    }; 
}); 
} 

function getMappedSeries(series) { 
    return series.map(function(serie, i) { 
    return { 
     color: colors[i], 
     name: serie.name, 
     data: serie.data.map(function(value, j) { 
     return j % 2 ? { 
      y: value, 
      color: 'url(#custom-pattern-' + i + ')' 
     } : value; 
    }) 
    }; 
}); 
}

例如：http://jsfiddle.net/6c48x39v/8/

本身，你可以設置邊框虛線樣式的系列，但你需要設置虛線樣式的具體點，所以你就必須拆分串聯成破折號/無邊框系列或extend Highcharts。

來源

2016-11-11 14:03:15 morganfree

這真的很棒！你能解釋一下模式字符串'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11'嗎？ – user3560659

如何在高圖中創建虛線條形圖

回答

相關問題