Highcharts 需要帮助在Jupyter笔记本中创建highchart直方图吗

Highcharts 需要帮助在Jupyter笔记本中创建highchart直方图吗,highcharts,jupyter-notebook,Highcharts,Jupyter Notebook,我正试图在Jupyter笔记本中嵌入Highchart直方图。我已经将代码简化为2个单元格和一个小的虚拟序列,用于实际数据,以尝试限制可能导致问题的任何周围代码。我仍然不断地在控制台上收到错误17(series类型不存在)。我认为问题在于导入直方图bellcurve模块,但无法解决这个问题。任何帮助都将不胜感激 单元1: %%javascript require.config({ paths: { highcharts: "http://code.highcharts.com/hig

我正试图在Jupyter笔记本中嵌入Highchart直方图。我已经将代码简化为2个单元格和一个小的虚拟序列,用于实际数据,以尝试限制可能导致问题的任何周围代码。我仍然不断地在控制台上收到错误17(series类型不存在)。我认为问题在于导入直方图bellcurve模块,但无法解决这个问题。任何帮助都将不胜感激

单元1:

%%javascript
require.config({
  paths: {
    highcharts: "http://code.highcharts.com/highcharts",
    highcharts_hist: "http://code.highcharts.com/modules/histogram-bellcurve"
  },
  shim: {
    highcharts: {
      exports: "Highcharts",
      deps: ["jquery"]
    },
    highcharts_hist: {
      exports: "Highcharts",
      deps: ["highcharts"]
    }
  }
});
单元2:

%%javascript
$("#container").remove();

element.append('<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');

require(['highcharts_hist'], function(Highcharts) {
    $('#container').highcharts({
        'title': {
            'text': 'Highcharts Histogram'
        },
        'xAxis': [{
            'title': { 'text': 'Data' },
            'alignTicks': false
        }, {
            'title': { 'text': 'Histogram' },
            'alignTicks': false,
            'opposite': true
        }],

        'yAxis': [{
            'title': { 'text': 'Data' }
        }, {
            'title': { 'text': 'Histogram' },
            'opposite': true
        }],
        'series':  [{
            'name': 'Histogram',
            'type': 'histogram',
            'xAxis': 1,
            'yAxis': 1,
            'baseSeries': 's1',
            'zIndex': -1
        }, {
            'name': 'Data',
            'type': 'scatter',
            'data': [1,1,1,2,2,3,3,3,3,3,4,5,6,7,7,7,7,7,7,7,8,8,9,9,10,11],
            'id': 's1',
            'marker': {
                'radius': 1.5
            }
        }]
    });
});
%%javascript
$(“#容器”).remove();
元素。追加(“”);
需要(['highcharts\u hist'],函数(highcharts){
$(“#容器”)。高图({
“标题”:{
“文本”:“Highcharts直方图”
},
“xAxis”:[{
'title':{'text':'Data'},
“alignTicks”:false
}, {
'title':{'text':'Histogram'},
“alignTicks”:false,
“相反”:正确
}],
“yAxis”:[{
'title':{'text':'Data'}
}, {
'title':{'text':'Histogram'},
“相反”:正确
}],
“系列”:[{
“名称”:“直方图”,
“类型”:“直方图”,
"xAxis":1,,
"雅克西斯":1,,
“baseSeries”:“s1”,
“zIndex”:-1
}, {
“名称”:“数据”,
'type':'scatter',
"数据":[1,1,1,2,3,3,3,4,5,6,7,7,7,7,8,8,9,9,10,11],,
“id”:“s1”,
“标记器”:{
“半径”:1.5
}
}]
});
});

从谷歌上看,这种方法似乎曾经奏效,但现在你的结果似乎是默认的。从中,似乎需要专门加载模块

在您的案例中,我成功地使用了这种方法(单元格2中的更改):

%%javascript
$(“#容器”).remove();
元素。追加(“”);
要求(['highcharts','highcharts\u hist'],函数(highcharts,直方图){
直方图(高图);//这就是神奇发生的地方
$(“#容器”)。高图({
//…为了简洁起见
});
});

查看或查看它的运行情况。

您好,您的问题肯定是由于错误导入直方图bellcurve模块造成的。在本例中可以看到相同的行为:
%%javascript
$("#container").remove();

element.append('<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');

require(['highcharts', 'highcharts_hist'], function(Highcharts, histogram) {
    histogram(Highcharts); // This is where the magic happens

    $('#container').highcharts({
        // ... for brevity
    });
});