highcharts - 需要帮助在 Jupyter-Notebook 中创建高图直方图

Question

我正在尝试在 Jupyter 笔记本中嵌入 Highchart 直方图。我已将代码简化为 2 个单元格和一个用于实际数据的小型虚拟系列，以尝试限制任何可能导致问题的周围代码。我仍然在控制台上不断收到错误 17（该系列类型不存在）。我认为问题在于导入 histogram-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
            }
        }]
    });
});

标签： highchartsjupyter-notebook

Answer 1

从 Google 看来，这种方法曾经奏效，但是您的结果现在似乎是默认值。从Highcharts 文档中，您似乎需要专门加载模块。

在您的情况下，我使用这种方法取得了成功（单元格 2 中的更改）：

%%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
    });
});

请参阅此要点或此 nbviewer以查看它的实际效果。