Question

观察下面示例中具有常数值的系列1，并且对于该系列点，不绘制连接线，但是当我们给出纯色时，则将绘制该线。

Highchart的线图与常数系列在我们使用线渐变颜色时没有绘制线b / w点，但如果将其更改为纯色，则线将绘制。

highcharts.series[].data = [2, 2, 2, ...];
highcharts.color[0] = {
   linearGradient: {...},
   stop: {...}
};

检查此示例： https://jsfiddle.net/4vk7cdmz/

Answer 1

这是因为gradientUnits中的属性linearGradient，其默认值为objectBoundingBox。

关键字objectBoundingBox不应该在几何体时使用适用元素没有宽度或没有高度，例如a的情况 水平或垂直线，即使该线具有实际厚度当由于行程宽度而具有非零行程宽度而被观察时被忽略的边界框计算。当几何学适用的元素没有宽度或高度，objectBoundingBox是指定，然后给定的效果（例如，渐变或过滤器）将被忽略了。

W3C Recommendation

您需要使用gradientUnits="userSpaceOnUse"。

Highcharts.js已在2.2版中修复此问题。

而不是使用linearGradient作为对象

"linearGradient": {
   "x1": 0,
   "y1": 0,
   "x2": 1,
   "y2": 0
}

，将其用作数组

"linearGradient": [x1, y1, x2, y2],

会在highcharts.js

中将gradientUnits设置为userSpaceOnUse

（这需要了解线宽。）

这是一个演示：

var Chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'a constant series line is not plotting when using linear gradient colour.'
  },

  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 150,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },

  colors: [{
    "linearGradient": [0, 0, 500, 0],
    "stops": [
      [0, "rgb(35,190,250)"],
      [1, "rgb(51,223,188)"]
    ]
  }, {
    "linearGradient": [0, 0, 500, 0],
    "stops": [
      [0, "rgb(250,79,168)"],
      [1, "rgb(156,120,229)"]
    ]
  }],

  xAxis: {
    categories: [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ],
    plotBands: [{ // visualize the weekend
      from: 4.5,
      to: 6.5,
      color: 'rgba(68, 170, 213, .2)'
    }]
  },
  yAxis: {
    title: {
      text: 'Fruit units'
    }
  },
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    areaspline: {
      fillOpacity: 0.5
    }
  },
  series: [{
      name: 'John',
      data: [2, 2, 2, 2, 2, 2, 2]
    },
    {
      name: 'Jane',
      data: [1, 1, 1, 1, 1, 1, 2]
    }
  ]
});

#container {
  width: 100%;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/css/highcharts.css" />

<div id="container"></div>

高线图的折线图，使用线性渐变颜色时，不使用系列绘图

1 个答案: