Javascript 将HighChart转换为带标题的堆叠条形图

我不熟悉Highcharts，我正在尝试将当前的HighChart转换为一个带有标题的堆叠条形图，我正在努力让代码正常工作。它目前是一个没有标题的普通条形图，我想把它堆叠起来

function get_chart() {
    return {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            alert('Category: ' + this.category + ', value: ' + this.y);
                        }
                    }
                }
            }
        },

        series: [{
            type: 'column',
            name: 'Tweets',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            type: '',
            name: 'Total',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            marker: {
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[3],
                fillColor: 'white'
            }
        }]
    };
}

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();
}

---

见下面的代码，这里是工作

---

几点：您正在绘制柱状图，但实际上想要一个条形图。您为列设置了plotOption，而我在plotOption.series中设置了堆叠。

将我的plotOptions代码替换为您的后，它变成了一个折线图。我认为您缺少AngularJs指令中的这一部分，您必须使用type:'bar'，它应该可以正常工作，在您的AngularJs函数中，您正在使用图表对象，只需添加图表{type:'bar'，然后它就可以正常工作。在系列中尝试itor>>系列：[{类型：'bar'，//添加此名称：'Tweets'，数据：[29.9,71.5,106.4129.2,144.0176.0,135.6148.5216.4194.1,95.6,54.4]}您的权利！非常感谢！还有，如何添加图表标题并使其成为垂直堆叠条形图？对于垂直堆叠图表>>只需将类型更改为列。表示类型：'column'，对于标题标题：{text:'Your title'}请参阅此fiddle@user2402107

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

    },

    series: [{

        name: 'Tweets',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {

        name: 'bar',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }]