高亮图案填充

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

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

\n\n

\r\n

\r\n

var gfxPath = \'https://raw.githubusercontent.com/highcharts/pattern-fill/master/graphics/\';\r\n\r\nvar chart = new Highcharts.Chart({\r\n\r\n\r\n  chart: {\r\n    height: 95,\r\n    width: 550,\r\n    spacingBottom: 0,\r\n    marginLeft: 180,\r\n    marginRight: 10,\r\n    spacingLeft: 0,\r\n    marginTop: 2,\r\n    animation: false,\r\n    backgroundColor: \'transparent\',\r\n    renderTo: \'container\'\r\n  },\r\n  title: {\r\n    text: \'\'\r\n  },\r\n  subtitle: {\r\n    text: \'\'\r\n  },\r\n  legend: {\r\n    enabled: false\r\n  },\r\n  plotOptions: {\r\n    series: {\r\n      stacking: \'normal\',\r\n      borderColor: \'transparent\',\r\n    },\r\n    bar: {\r\n      pointWidth: 7,\r\n    },\r\n    columnrange: {\r\n      grouping: false,\r\n      shadow: false,\r\n      borderWidth: 0,\r\n    }\r\n  },\r\n  xAxis: {\r\n    gridLineColor: \'#969696\',\r\n    gridLineWidth: 1,\r\n    categories: ["Differentiering", "T\xc3\xa6nkning", "Opfattelse"],\r\n    lineColor: \'#969696\',\r\n    tickLength: 0\r\n  },\r\n  defs: {\r\n    patterns: [{\r\n      \'id\': \'custom-pattern\',\r\n      \'path\': {\r\n        d: \'M10 0 L0 10\',\r\n        stroke: \'green\',\r\n        strokeWidth: 10\r\n      }\r\n    }]\r\n  },\r\n  yAxis: {\r\n    gridLineWidth: 1,\r\n    gridLineColor: \'#969696\',\r\n    minorGridLineColor: \'#969696\',\r\n    tickColor: \'#969696\',\r\n    tickWidth: 1,\r\n    tickInterval: 10,\r\n    minorTickInterval: 5,\r\n    min: 0,\r\n    max: 100,\r\n    title: \'\',\r\n    plotLines: [{\r\n      color: \'#000\',\r\n      width: 2,\r\n      value: 50,\r\n      zIndex: 5\r\n    }]\r\n  },\r\n\r\n\r\n\r\n  series: [{\r\n    "name": "seen",\r\n    "color": "#d5d5d5",\r\n    "type": \'bar\',\r\n    "marker": {\r\n      "symbol": "dot"\r\n    },\r\n    "data": [60, 35, 50],\r\n    "fillColor": null,\r\n    "lineColor": null,\r\n    "zIndex": 3,\r\n    "dataLabels": {\r\n      "enabled": false\r\n    },\r\n    "size": 0,\r\n    "enableMouseTracking": false\r\n  }, {\r\n    "name": "wrong",\r\n    "color": "#817f81",\r\n    "type": \'bar\',\r\n    "marker": {\r\n      "symbol": "dot"\r\n    },\r\n    "data": [10, 20, 0],\r\n    "fillColor": null,\r\n    "lineColor": null,\r\n    "zIndex": 3,\r\n    "dataLabels": {\r\n      "enabled": false\r\n    },\r\n    "size": 0,\r\n    "enableMouseTracking": false\r\n  }, {\r\n    "name": "correct",\r\n    "color": "#000",\r\n    "type": \'bar\',\r\n    "marker": {\r\n      "symbol": "dot"\r\n    },\r\n    "data": [10, 25, 40],\r\n    "fillColor": null,\r\n    "lineColor": null,\r\n    "zIndex": 3,\r\n    "dataLabels": {\r\n      "enabled": false\r\n    },\r\n    "size": 0,\r\n    "enableMouseTracking": false\r\n  }, {\r\n    type: \'columnrange\',\r\n    "data": [\r\n      [50, 90]\r\n    ],\r\n    color: {\r\n      pattern: gfxPath + \'pattern2.png\',\r\n      width: 6,\r\n      height: 6,\r\n      // VML only:\r\n      color1: \'red\',\r\n      color2: \'yellow\'\r\n    }\r\n  }]\r\n\r\n});

\r\n

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>\r\n<script src="https://code.highcharts.com/highcharts.js"></script>\r\n<script src="https://code.highcharts.com/highcharts-more.js"></script>\r\n<script src="https://highcharts.github.io/pattern-fill/pattern-fill.js"></script>\r\n\r\n<div id="container" style="height: 300px"></div>

\r\n

\r\n

\r\n

\n\n

与版本 2

\n\n

将columnrange data作为

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n