Стиль тире на графике

Question

Я пытаюсь изменить стиль линии диаграммы, но я не получаю ее.Я хочу изменить черную линию в середине графика на стиль "DASH"

Я уже поставил "dashStyle:'dash' 'в нескольких местах, но безуспешно

Answer 1

Я пытаюсь изменить стиль линии диаграммы, но не получаю ее.

Это невозможно, потому что то, что вы называете линией, на самом деле является SVG прямоугольник элемент.Вот почему это не может быть разбито.

Тем не менее, вы можете достичь того, чего хотите, добавив некоторую пользовательскую логику и используя Highcharts.SVGRenderer.Просто удалите графический объект по умолчанию для каждой точки серии и визуализируйте несколько прямоугольников с разрывами, чтобы создать пунктирную линию .Проверьте код и демоверсию, размещенную ниже.

Код:

Highcharts.setOptions({
  chart: {
    inverted: true,
    marginLeft: 135,
    type: 'bullet',
    events: {
      render: function() {
        var chart = this,
          point = chart.series[0].points[0],
          width = point.shapeArgs.height,
          height = point.shapeArgs.width,
          x = chart.plotLeft,
          xEnd = x + width,
          y = chart.plotTop + point.shapeArgs.x,
          dashWidth = 15,
          dashBreakWidth = 5,
          dashColor = '#000',
          dashElem,
          dashAmount,
          realDashBreakWidth;

        if (chart.dashedColl) {
          chart.dashedColl.forEach(function(oldDashElem) {
            oldDashElem.destroy();
          });
        }

        point.graphic.element.remove();
        chart.dashedColl = [];

        dashAmount = Math.floor(width / (dashWidth + dashBreakWidth));
        realDashBreakWidth = (width - dashAmount * dashWidth) / (dashAmount - 1);

        while (x < xEnd) {
          dashElem = chart.renderer.rect(x, y, dashWidth, height)
            .attr({
              fill: dashColor
            })
            .add()
            .toFront();

          chart.dashedColl.push(dashElem);

          x += dashWidth + realDashBreakWidth;
        }
      }
    }
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    gridLineWidth: 0
  },
  plotOptions: {
    series: {
      pointPadding: 0.25,
      borderWidth: 0,
      color: 'red',
      targetOptions: {
        width: '200%'
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
});

Демо:

• https://jsfiddle.net/BlackLabel/7azfso1r/

Ссылка API:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

• https://api.highcharts.com/class-reference/Highcharts.Point#remove

• https://api.highcharts.com/highcharts/chart.events.render