Question

我是HighCharts的新手，我正在尝试在访问相同数据源但仅为每个图表获取某些部分的相同p [年龄]上添加两个Highcharts。因此，例如，类别将保持不变，但系列[]将更改

function get_chart() {
    var options =   {
        chart: {
            type: 'column',
            renderTo:'container'
        },
        title: {
            text: 'Twitter Data'
        },
        xAxis: {
            categories: []
        },

        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }, point: {
                       events: {
                           click: function () {
                               alert('Category: ' + this.category + ', value: ' + this.y);
                           }
                       }
                   }
               }

            },

        series: []

    };
    $.getJSON("data.json", function(json) {
        options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        options.series[1] = json[2];
        chart = new Highcharts.Chart(options);
    });
}
get_chart();

var app = angular.module('charts', []);

app.directive('highchart', [function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {

            scope.$watch(attrs.chart, function () {

                if (!attrs.chart) return;

                var chart = scope.$eval(attrs.chart);

                angular.element(element).highcharts(chart);
            });

        }
    }
}]);

function Ctrl($scope) {
    $scope.example_chart = get_chart();
}

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS + Highcarts </title>
    </head>
    <body>

        <section ng-app='charts'>
            <div ng-controller="Ctrl">
                <highchart chart='example_chart'></highchart>
            </div>
        </section>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="js/highChartStyle.js"></script>
        <script type="text/javascript" src="js/highChartAngular.js"></script>
    </body>
</html>

Answer 1

更新请参阅此 woking Plunker

因为你在同一个div上调用了多个高图。 Id在html中是唯一的，您无法定义具有相同ID的两个div。

在你的函数中传递div id或在classname上调用highcharts，如下所示：

get_chart(divParam)

和图表对象

chart: {
            type: 'column',
            renderTo:'divParam'
        }

在一个屏幕上添加多个HighCharts Angularjs

1 个答案: