линейная диаграмма старшей диаграммы с константным рядом не строится при использовании цвета линейного градиента

Question

Обратите внимание на серию один в приведенном ниже примере, имеющую постоянное значение, и для точек этой серии соединительные линии не отображаются, но когда мы даем сплошной цвет, тогда линия будет построена.

Линейный график Highchart с константным рядом, который не отображает точки ч / б линии, когда мы используем цвет градиента линии, но если вы измените его на сплошной цвет, тогда будет построена линия.

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

Проверьте этот пример: https://jsfiddle.net/4vk7cdmz/

Answer 1

Это связано с атрибутом gradientUnits в linearGradient, значением по умолчанию которого является objectBoundingBox.

Ключевое слово objectBoundingBox не должно использоваться, когда геометрия применимого элемента не имеет шириныили отсутствие высоты, например, в случае горизонтальной или вертикальной линии , даже если линия имеет фактическую толщину при просмотре из-за ненулевой ширины обводки, поскольку ширина обводки игнорируется для расчетов ограничивающей рамкой.Когда геометрия применимого элемента не имеет ширины или высоты и указывается objectBoundingBox, данный эффект (например, градиент или фильтр) будет игнорироваться.

W3C Рекомендация

Вам необходимо использовать gradientUnits="userSpaceOnUse".

Highcharts.js исправил эту проблему в версии 2.2.

Вместо использования linearGradient в качестве объекта

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

, используя его как массив

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

установит gradientUnits в userSpaceOnUse в highcharts.js

(это требует знания ширины линии.)

Вот демоверсия:

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>