在highchart图形样式破折号

Question

我试图更改图表的线条样式，但我没有得到它。我期待改变图表中间的黑线，到样式“DASH”

我已经把“dashStyle：‘冲刺’”在几个地方，但都没有成功。

的例子是highcharts的一个

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