javascript - 带平均线的 HighChart 箱线图

Question

所以，我试图在 highchart 中复制此图表，但我无法使平均线遵循如图所示的结果

这是我编写的脚本:

Highcharts.chart('container', {

    chart: {
        type: 'boxplot'
    },

    title: {
        text: 'Highcharts Box Plot Example'
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36'],
        title: {
            text: 'Position in read (bp)'
        }
    },

    yAxis: {
        title: {
            text: 'Phred Score'
        },
        plotLines: [{
            value: 33.84367666502835,
            color: 'red',
            width: 1,
            label: {
                text: 'Theoretical mean',
                align: 'center',
                style: {
                    color: 'gray'
                }
            }
        }]
    },

    series: [{
        name: 'Base',
        data: [
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[36.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0]

        ],
    }]

});

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

http://jsfiddle.net/9d10x2co/

当我尝试添加每个 yAxis 值的所有平均分数时，图表不会呈现:

Highcharts.chart('container', {

chart: {
    type: 'boxplot'
},

title: {
    text: 'Highcharts Box Plot Example'
},

legend: {
    enabled: false
},

xAxis: {
    categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36'],
    title: {
        text: 'Position in read (bp)'
    }
},

yAxis: {
    title: {
        text: 'Phred Score'
    },
    plotLines: [{
       value: 33.84367666502835,33.89697626283254,33.897253161840545,33.92746630485196,33.92058190326533,37.64551388994649,37.631038994302806,37.64324331808081,37.599534809666544,37.63804107796784,37.615328436835874,37.51758654824619,37.53457430238756,37.567487210727066,37.58483839481645,37.53966578289733,37.57403241102889,37.59610472320483,37.5506136774265,37.532234505769885,37.551845878012145,37.55333767141779,37.56077587102044,37.59732307884007,37.595734370781614,37.60087776985539,37.53931619789972,37.51814380749981,37.49217414178614,37.31087105505445,37.479839396520255,37.51636923463617,37.55800419733795,37.49646972822706,37.573816951303336,37.59177038226607,
        color: 'red',
        width: 1,
        label: {
            text: 'Theoretical mean',
            align: 'center',
            style: {
                color: 'gray'
            }
        }
    }]
},

series: [{
    name: 'Base',
    data: [
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[34.0,34.0,34.0,34.0,34.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[36.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0],
[37.0,38.0,38.0,38.0,38.0]

    ],
}]

});

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

http://jsfiddle.net/9d10x2co/1/

你们能帮我吗？

Answer 1

绘图线只能是直线，因此不会出现弯曲的线。您需要使用renderer.path渲染一条线。路径的坐标可以通过 axis.toPixels 获得(x 和 y 坐标)。

function renderMean() {
  const chart = this
  const values = [33.84367666502835, 33.89697626283254, 33.897253161840545, 33.92746630485196, 33.92058190326533, 37.64551388994649, 37.631038994302806, 37.64324331808081, 37.599534809666544, 37.63804107796784, 37.615328436835874, 37.51758654824619, 37.53457430238756, 37.567487210727066, 37.58483839481645, 37.53966578289733, 37.57403241102889, 37.59610472320483, 37.5506136774265, 37.532234505769885, 37.551845878012145, 37.55333767141779, 37.56077587102044, 37.59732307884007, 37.595734370781614, 37.60087776985539, 37.53931619789972, 37.51814380749981, 37.49217414178614, 37.31087105505445, 37.479839396520255, 37.51636923463617, 37.55800419733795, 37.49646972822706, 37.573816951303336, 37.59177038226607]

  const xAxis = chart.xAxis[0]
  const yAxis = chart.yAxis[0]

  const points = values.map((v, i) => [xAxis.toPixels(i), yAxis.toPixels(v)])
  points.splice(0, 0, 'M')
  points.splice(2, 0, 'L')
  const d = points.reduce((d, p) => {
    return d.concat(p)
  }, [])

  if (!this.tMean) {
    this.tMean = chart.renderer.path(d).add().attr({
      'stroke-width': 1,
      stroke: 'red'
    })
  } else {
    this.tMean.animate({
      d
    })
  }
}

在加载/重绘事件上附加函数:

  chart: {
    type: 'boxplot',
    events: {
      load: renderMean,
      redraw: renderMean
    }
  },

示例:http://jsfiddle.net/c9zdt6ay/