具有多个系列的 Highcharts-ng 绘制图表不正确

Question

我有两个小提琴：no angular, and using angular。带有 angular 的那个不能正常工作。它不在 xAxis 中显示日期，也不在 yAxis 中使用百分比。是否需要做一些具体的事情才能与 angular 一起工作？

没有angularhtml

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

Angular html

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div ng-app="myApp">
    <div ng-controller="myctrl">
        <highchart id="chart1" config="ipo" class="span9"></highchart>
    </div>
</div>

不是angularjavascript

$(function () {

    function createChart() {

        $('#container').highcharts('StockChart', {

            rangeSelector: {
                selected: 4
            },

            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },

            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2
            },

            series: [{
            name: 'IPO',
            data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
        }, {
            name: 'SPX',
            data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
        }]
        });
    }
createChart();
    
});

Angular javascript

var myApp = angular.module('myApp', ['highcharts-ng']);
myApp.controller('myctrl', BindingCode);
myApp.factory("Factory", Factory);

function ipo() {
    this.chartConfig = {
        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: [{
            name: 'IPO',
            data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
        }, {
            name: 'SPX',
            data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
        }]
    }
}

function BindingCode($scope,Factory) {
    $scope.ipo = Factory.CreateChart();
    $scope.ipo = $scope.ipo.chartConfig;
}

function Factory() {
    return {
        CreateChart: function () {
            return new ipo();
        }
    }
}

不是angular截图

Angular截图

Answer 1

问题是并非所有 highchart 选项都进入顶级 JSON 配置。

来自FAQ：

Why doesn't my plot options/tooltip/drilldown/other feature work?

At least half of all issues filed are due to this. Before you file an issue read this! A common error is to put other Highcharts options directly into the chartConfig. In general if the Highcharts option you want isn't listed above you probably want to put it in chartConfig.options.

在您的情况下，您需要将 'series' 以外的所有内容都移动到选项对象中。

chartConfig = {
    options : {
        rangeSelector: {
            selected: 4
        },
        type: "line",
        plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
                }],
        plotOptions: {
            series: {
                compare: 'percent'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },
        yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
        }
      },
    series: [{
            name: 'IPO',
            data: [[1381881600000, 20.34], [1381968000000, 20.43], [1382054400000, 20.72]]
          }, {
            name: 'SPX',
            data: [[1381881600000, 1721.54], [1381968000000, 1733.15], [1382054400000, 1744.5]]
    }]
}

已更新fiddle

https://jsfiddle.net/mgwkzob3/1/

具有多个系列的 Highcharts-ng 绘制图表不正确

Highcharts-ng with multiple series draw chart incorrectly

highcharts-ng