highcharts/highcharter中曲线下到十字准线一侧的阴影区域答案

【问题标题】：Shade area under the curve to one side of crosshair in highcharts/highcharterhighcharts/highcharter中曲线下到十字准线一侧的阴影区域
【发布时间】：2022-11-02 17:53:17
【问题描述】：

我正在寻找一种方法来对光标左侧的区域进行着色，以直观地查看 x < X 的密度曲线下总面积的比例，即累积密度函数的视觉感觉。在 highcharts 中是否有一种简单/优雅的方法来做到这一点？

library(highcharter)

df <- data.frame(x = seq(-3, 3, 0.02),
                 pdf = dnorm(seq(-3, 3, 0.02)),
                 cdf = pnorm(seq(-3, 3, 0.02)))

highchart() |>
  hc_add_series(df, "line", hcaes(x, pdf)) |>
  hc_tooltip(
    headerFormat = "",
    pointFormat = "{point.cdf}"
    ) |>
  hc_xAxis(crosshair = T)

【问题讨论】：

标签： highcharts r-highcharter

【解决方案1】：

您可以尝试更改 SVG 属性中的着色参数，这些选项仅在包装核心 Highcharts 代码中可用。

(function(H) {
  H.wrap(H.Axis.prototype, 'drawCrosshair', function(p, e, point) {
    p.call(this, e, point)

    console.log(this, e, point);

    if (this.cross && point) {
      this.cross.attr({
        stroke: point.series.color,
        d: "M 10 50 L 200 50"
      })
    }
  })
}(Highcharts));

Highcharts.chart('container', {
  xAxis: {
    crosshair: true
  },
  yAxis: {
    crosshair: true
  },
  series: [{
    data: [20, 30, 50]
  }, {
    data: [10, 20, 15]
  }]
});

演示：http://jsfiddle.net/BlackLabel/xe902c6q/

【讨论】：