在一个屏幕上添加多个HighCharts

Adding Multiple HighCharts on one screen Angularjs

本文关键字：添加 HighCharts 屏幕一个更新时间：2023-09-26

我是HighCharts的新手，我正在尝试在访问相同数据源的相同p[age]上添加两个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>

更新查看此工作的Plunker

因为你在同一个div上调用多个highchart . Id在html中是唯一的，你不能用相同的Id定义两个div。

在函数中传递div id或在类名上调用highcharts，如下所示:

get_chart(divParam)

和在图表对象

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