Как создать пунктирную гистограмму в highcharts

Question

Мне нужно создать гистограммы, как показано на прилагаемом изображении, используя высокоскоростные диаграммы. График на изображении был создан с использованием Excel. Но Highcharts, похоже, не обеспечивает такую ​​функцию. Хотя он позволяет создавать графики с использованием шаблонов, но у них нет большого контроля над этими шаблонами. Может кто-нибудь, пожалуйста, подтвердите, можем ли мы создавать подобные диаграммы в диаграммах или нет? Я создал скрипку с Highcharts для образца на http://jsfiddle.net/sandeepkparashar/6c48x39v/3/Dashed Bar Chart

Answer 1

Как было отмечено в комментарии, 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.