在同一图表 Highcharts 中使用 bellcurbe 创建直方图

时间:2021-02-24 22:15:16

标签: javascript highcharts

我正在使用 highcharts 9.0.1,我尝试使用 histogram-bellcurve.js 创建带有 bellcurve 的直方图,但我无法得到它。

这就是我要吃的东西。

                          // Bell Curve Chart
                    Highcharts.chart('container', {

                        title: {
                            text: 'Bell curve'
                        },

                        xAxis: [{
                            title: {
                                text: 'Data'
                            },
                            alignTicks: false
                        }, {
                            title: {
                                text: 'histogram'
                            },
                            alignTicks: false,
                            opposite: true
                        },{
                            title: {
                                text: 'Bell curve'
                            },
                            alignTicks: false,
                            opposite: true
                        }],

                        yAxis: [{
                            title: { text: 'Data' }
                        }, {
                            title: { text: 'Bell curve' },
                            opposite: true
                        }],

                        series: [{
                            name: 'Bell curve',
                            type: 'bellcurve',
                            xAxis: 1,
                            yAxis: 1,
                            baseSeries: 1,
                            zIndex: -1
                        },
                        {
                            name: 'Histogram',
                            type: 'histogram',
                            xAxis: 1,
                            yAxis: 1,
                            baseSeries: 2,
                            zIndex: -1
                        },     {
                        name: 'Data',
                        type: 'scatter',
                        visible:false,
                        data: data,
                        accessibility: {
                            exposeAsGroupOnly: true
                        },
                        marker: {
                            radius: 1.5
                        }
                    }]
               });

https://jsfiddle.net/lvevano/g9czr63s/6/

有没有办法创建这种图表?

enter image description here 问候!

1 个答案:

答案 0 :(得分:1)

这是一个非常基本的示例,基于您发布的内容。您可以使用属性使其看起来更好,但这应该可以满足您的要求。

series: [{
      name: 'Bell curve',
      type: 'bellcurve',
      data: data,



    },
    {
      name: 'Data',
      type: 'histogram',
      data: data

    }
  ]

https://jsfiddle.net/u1s0d2pa/1/