Question

我有两个小提琴：no angular和using angular。具有角度的那个不能正常工作。它不会在xAxis中显示日期，也不会对yAxis使用百分比。是否有特定需要做的事情，以使角度工作？

没有角度html

layer-list

Angular html

<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>

不是角度javascript

<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>

Angular javascript

$(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截图

Answer 1

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

来自FAQ：

为什么我的情节选项/工具提示/钻取/其他功能不起作用？

所有提交的问题中至少有一半归因于此。在你提交之前   问题看了这个！常见的错误是放置其他Highcharts选项   直接进入chartConfig。一般来说，如果Highcharts选项你   想要不列在上面你可能想把它放进去   chartConfig.options。

在您的情况下，您需要将除“系列”之外的所有内容移动到选项对象中。

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]]
    }]
}

更新了小提琴

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

具有多个系列的Highcharts-ng错误地绘制图表

1 个答案: