ハイチャートで破線の棒グラフを作成する方法

Question

ハイチャートを使用して添付画像に示すように棒グラフを作成する必要があります。画像内のグラフは、Excelを使用して作成されています。しかし、Highchartsはそのような機能を提供していないようです。パターンを使ってグラフを作成することはできますが、それらのパターンをあまり制御することはできません。私たちがハイチャートで同様の種類のチャートを作成できるかどうか誰にでも確認できますか？私はコメントで述べたように、pattern-fill pluginはこれを扱うことができhttp://jsfiddle.net/sandeepkparashar/6c48x39v/3/Dashed Bar Chart

Answer 1

でサンプルのためhighchartsとフィドルを作成しました。 パターンを作成して系列をマップすることができるので、2番目ごとの列には対応するパターンがあります。

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。