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/

私は、各Y軸がチャートがレンダリングされません値のためにすべての私の平均得点を追加しよう：

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 
    } 
    }, 

例：D：http://jsfiddle.net/c9zdt6ay/