highcharts - Highchart 图案填充

Question

我正在尝试使用模式作为列范围以允许条形图工作。

图案出现但不使用预定义的图案，所以它只是纯蓝色。通常它使用已定义的条纹图案，并在散点图等上完美运行。

这是一个片段，展示了我的意思:

 Highcharts.chart('logicalCapacity', {
            chart: {
                height: 95,
                width: 550,
                spacingBottom: 0,
                marginLeft: 180,
                marginRight: 10,
                spacingLeft: 0,
                marginTop: 2,
                animation: false,
                backgroundColor: 'transparent'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    borderColor: 'transparent',
                },
                bar: {
                    pointWidth: 7,
                },
                columnrange: {
                    grouping: false,
                    shadow: false,
                    borderWidth: 0,
                }
            },
            xAxis: {
                gridLineColor: '#969696',
                gridLineWidth: 1,
                categories: ["Differentiering", "Tænkning", "Opfattelse"],
                lineColor: '#969696',
                tickLength: 0
            },
            defs: {
                patterns: [{
                    'id': 'custom-pattern',
                    'path': {
                        d: 'M10 0 L0 10',
                        stroke: 'green',
                        strokeWidth: 10
                    }
                }]
            },
            yAxis: {
                gridLineWidth: 1,
                gridLineColor: '#969696',
                minorGridLineColor: '#969696',
                tickColor: '#969696',
                tickWidth: 1,
                tickInterval: 10,
                minorTickInterval: 5,
                min: 0,
                max: 100,
                title: '',
                plotLines: [{
                    color: '#000',
                    width: 2,
                    value: 50,
                    zIndex: 5
                }]
            },
            series: [
                { "name": "seen", "color": "#d5d5d5", "type": 'bar', "marker": { "symbol": "dot" }, "data": [60, 35, 50], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
                { "name": "wrong", "color": "#817f81", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 20, 0], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
                { "name": "correct", "color": "#000", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 25, 40], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
                { "name": "",  pointPadding: -0.3, "type": "columnrange", "marker": { "symbol": "dot" },"lineColor":"transparent", fillColor: { pattern: 'url(#custom-pattern)'}, "data": [[50, 90]], "zIndex": 1, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
            ]
        });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

<div id="logicalCapacity"></div>

    

希望有人能指出我正确的方向？

Answer 1

您可以使用 Version 1的图案填充。

var gfxPath = 'https://raw.githubusercontent.com/highcharts/pattern-fill/master/graphics/';

var chart = new Highcharts.Chart({


  chart: {
    height: 95,
    width: 550,
    spacingBottom: 0,
    marginLeft: 180,
    marginRight: 10,
    spacingLeft: 0,
    marginTop: 2,
    animation: false,
    backgroundColor: 'transparent',
    renderTo: 'container'
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      stacking: 'normal',
      borderColor: 'transparent',
    },
    bar: {
      pointWidth: 7,
    },
    columnrange: {
      grouping: false,
      shadow: false,
      borderWidth: 0,
    }
  },
  xAxis: {
    gridLineColor: '#969696',
    gridLineWidth: 1,
    categories: ["Differentiering", "Tænkning", "Opfattelse"],
    lineColor: '#969696',
    tickLength: 0
  },
  defs: {
    patterns: [{
      'id': 'custom-pattern',
      'path': {
        d: 'M10 0 L0 10',
        stroke: 'green',
        strokeWidth: 10
      }
    }]
  },
  yAxis: {
    gridLineWidth: 1,
    gridLineColor: '#969696',
    minorGridLineColor: '#969696',
    tickColor: '#969696',
    tickWidth: 1,
    tickInterval: 10,
    minorTickInterval: 5,
    min: 0,
    max: 100,
    title: '',
    plotLines: [{
      color: '#000',
      width: 2,
      value: 50,
      zIndex: 5
    }]
  },



  series: [{
    "name": "seen",
    "color": "#d5d5d5",
    "type": 'bar',
    "marker": {
      "symbol": "dot"
    },
    "data": [60, 35, 50],
    "fillColor": null,
    "lineColor": null,
    "zIndex": 3,
    "dataLabels": {
      "enabled": false
    },
    "size": 0,
    "enableMouseTracking": false
  }, {
    "name": "wrong",
    "color": "#817f81",
    "type": 'bar',
    "marker": {
      "symbol": "dot"
    },
    "data": [10, 20, 0],
    "fillColor": null,
    "lineColor": null,
    "zIndex": 3,
    "dataLabels": {
      "enabled": false
    },
    "size": 0,
    "enableMouseTracking": false
  }, {
    "name": "correct",
    "color": "#000",
    "type": 'bar',
    "marker": {
      "symbol": "dot"
    },
    "data": [10, 25, 40],
    "fillColor": null,
    "lineColor": null,
    "zIndex": 3,
    "dataLabels": {
      "enabled": false
    },
    "size": 0,
    "enableMouseTracking": false
  }, {
    type: 'columnrange',
    "data": [
      [50, 90]
    ],
    color: {
      pattern: gfxPath + 'pattern2.png',
      width: 6,
      height: 6,
      // VML only:
      color1: 'red',
      color2: 'yellow'
    }
  }]

});

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill.js"></script>

<div id="container" style="height: 300px"></div>

使用版本 2

在 columnrange data将作为

"data": [{
   low: 50, 
   high: 90,
   color: 'url(#highcharts-default-pattern-0)'
    }]

Highcharts.chart('logicalCapacity', {
            chart: {
                height: 95,
                width: 550,
                spacingBottom: 0,
                marginLeft: 180,
                marginRight: 10,
                spacingLeft: 0,
                marginTop: 2,
                animation: false,
                backgroundColor: 'transparent'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    borderColor: 'transparent',
                },
                bar: {
                    pointWidth: 7,
                },
                columnrange: {
                    grouping: false,
                    shadow: false,
                    borderWidth: 0,
                }
            },
            xAxis: {
                gridLineColor: '#969696',
                gridLineWidth: 1,
                categories: ["Differentiering", "Tænkning", "Opfattelse"],
                lineColor: '#969696',
                tickLength: 0
            },
            defs: {
                patterns: [{
                    'id': 'custom-pattern',
                    'path': {
                        d: 'M10 0 L0 10',
                        stroke: 'green',
                        strokeWidth: 10
                    }
                }]
            },
            yAxis: {
                gridLineWidth: 1,
                gridLineColor: '#969696',
                minorGridLineColor: '#969696',
                tickColor: '#969696',
                tickWidth: 1,
                tickInterval: 10,
                minorTickInterval: 5,
                min: 0,
                max: 100,
                title: '',
                plotLines: [{
                    color: '#000',
                    width: 2,
                    value: 50,
                    zIndex: 5
                }]
            },
            series: [
                { "name": "seen", "color": "#d5d5d5", "type": 'bar', "marker": { "symbol": "dot" }, "data": [60, 35, 50], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
                { "name": "wrong", "color": "#817f81", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 20, 0], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
                { "name": "correct", "color": "#000", "type": 'bar', "marker": { "symbol": "dot" }, "data": [10, 25, 40], "fillColor": null, "lineColor": null, "zIndex": 3, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
                { "name": "",  pointPadding: -0.3, "type": "columnrange", "marker": { "symbol": "dot" },"lineColor":"transparent", fillColor: { pattern: 'url(#custom-pattern)'}, "data": [{
                low: 50, 
                high: 90,
 color: 'url(#highcharts-default-pattern-0)'
            }], "zIndex": 1, "dataLabels": { "enabled": false }, "size": 0, "enableMouseTracking": false },
            ]
        });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

<div id="logicalCapacity"></div>