时间戳

首页 > 解决方案 > 样条图上的标记点绑定到 x 和 y 轴

javascript - 样条图上的标记点绑定到 x 和 y 轴

问题描述

我有一个标记的样条图。

我想要的是两条虚线，一条从我的点到它的 x，一条从我的点到它的 y

我在 highchart api 中寻找解决方案或提示：https ://api.highcharts.com/highcharts/series.spline.data.marker

但我没有找到任何符合我期望的东西

我在 Fiddle 上的一个小例子： https ://jsfiddle.net/jdw9a8xg/1/

Highcharts.chart('container', {

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {

    }
},

series: [{
    data: [{x: 1,y: 15, marker: {
    radius: 8,
    enabled: true
    }}, {x:2, y: 150}, {x:3, y: 70}]
}]
});

谢谢

标签： javascriptgraphhighcharts

解决方案

您可以使用 SVGRenderer 工具来渲染这些线条。这是一个示例，如何为演示中的最大标记执行此操作：

https://jsfiddle.net/BlackLabel/hbjftaw6/

代码：

  chart: {
    events: {
      render() {
        let chart = this,
          point = chart.series[0].points[0];

        //if exist - destroy after the resize
        if(point.xLine && point.yLine) {
            point.xLine.destroy();
            point.yLine.destroy();
        }

        point.xLine = chart.renderer.path(['M', chart.plotLeft, point.plotY + chart.plotTop,
            'L', point.plotX + chart.plotLeft, point.plotY + chart.plotTop
          ])
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            dashstyle: 'ShortDash'
          })
          .add();

        point.yLine = chart.renderer.path(['M', chart.plotLeft + point.plotX, point.plotY + chart.plotTop,
            'L', point.plotX + chart.plotLeft, chart.plotHeight + chart.plotTop
          ])
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            dashstyle: 'ShortDash'
          })
          .add();

      }
    }
  },

API：https ://api.highcharts.com/highcharts/series.line.dashStyle

API：https ://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

推荐阅读