没有 jQuery 的 highcharts、highstock

Question

我知道你可以使用：

$(element).highcharts("StockChart", {}) 获取该元素的图表。

但是，我希望能够获得 highchart 对象的金币以便之后可以对其进行操作，或者我想这样做：

new Highcharts.Chart({
    chart : {
      renderTo : 'container'
      type     : 'StockChart'
    }
    ...
  });

首先：后者对类型'StockChart'不起作用。我得到 error code 17 上面写着：

"The requested series type does not exist"

其次：我更愿意将 renderTo 选项设置为元素 而不是 id。通过使用 id，它会强制我的元素也使用 id，但是在我可以有一个容器和一个 subelement 的地方，很难引用它。

现在，如果您在单个 html 页面上有很多图表，则 ID 并不理想。相反，我想使用实际的 dom 元素来传递。

通过使用 $(element).highcharts("StockChart", {})，我能够将几乎所有其他选项设置为全局选项，包括 rangeSelector 并使其正常工作。

但是，我仍然需要能够访问 this，它在事件函数（例如加载）中可用，所以我想我可以设置一个全局函数，但这可能有点矫枉过正。

Answer 1

我看到你的案例有三个问题：

1) 创建图表时获取对象有两种方式：

和jQuery:

var chart = $(element).highcharts('StockChart', options).highcharts();

没有jQuery:

var chart = new Highcharts.StockChart(options);

2) 错误#17：

"The requested series type does not exist"

是由type : 'StockChart'引起的。 type 为系列类型保留。正如 @Raeen Hashemi 所说，要创建 Highstock，请使用不同的构造函数：new Highcharts.StockChart(options)。

3) 是的，你可以传递一个对象给renderTo：http://jsfiddle.net/yvxwa6oq/

new Highcharts.StockChart({
    chart: {
        renderTo: document.getElementsByClassName("container")[0] 
    },

    series: [{
        name: 'USD to EUR',
        data: [10, 20]
    }]
});

4) this - 老实说，我不确定为什么您需要在事件处理程序之外的其他地方访问 this。而是使用 Highcharts.charts[index] 或存储的变量，如 chart 或 $(element).highcharts()

Answer 2

对于 ES6，在下面的方法中使用它。

import * as Highcharts from "highcharts";
import * as highchartsTree from 'highcharts/modules/treemap';

此外，可以添加任何高图类型而不是树图

highchartsTree(Highcharts);

没有 jQuery 的 highcharts、highstock

highcharts, highstock without jQuery

javascript

charts

highcharts

highstock