Highcharts：零对齐 y 轴 angular 6

Question

我需要实现这样的图表 link： highchart-image

所以我在highchart找到了一个插件，我觉得用起来很有用：

http://highchartsweb.vifi.ee/plugin-registry/single/42/Zero-align%20y-axes

我使用负责与名称 'tick_positioner.js' 对齐的文件，并将其添加到我的 angular 应用程序中。

"scripts": [
              "node_modules/highcharts-zero-align-y-axes/tick_positioner.js"
            ]

我首先发现了这个错误

tick_positioner.js:147 Uncaught ReferenceError: Highcharts is not defined

但是应用程序中加载了 highchart

Answer 1

要创建此类图表，您不需要使用 zero-align y-axes 插件：

Highcharts.chart('container', {
    series: [{
        type: 'column',
        data: [2, -3, -5, 1, 6, -2, 11, -9]
    }, {
        type: 'column',
        data: [-2, -3, -5, 1, 6, -2, 11, -9]
    }]
});

现场演示：http://jsfiddle.net/BlackLabel/750bu6a2/

但是，要在您的项目中加载插件，您应该像这样导入和初始化它：

import * as Highcharts from 'highcharts';
import * as HC_customEvents from 'highcharts-custom-events';
HC_customEvents(Highcharts);

文档：https://github.com/highcharts/highcharts-angular/blob/master/README.md

Highcharts：零对齐 y 轴 angular 6

Highcharts: zero-align y-axes angular 6

angular

highcharts

zero

yaxis