logo标签列表

Highchart图案填充

highcharts
6
我正在尝试使用模式作为列范围，以使条形图正常工作。该模式会显示出来，但不使用预定义的条纹状模式，因此呈现实心蓝色。通常情况下，它会使用定义好的条纹状模式，并且在散点图等上运行得很完美。
以下是一个展示我所说的内容的片段： 

 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>

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

1个回答
3

您可以使用版本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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接