1

我正在尝试根据图表中显示的水平条数动态更改图表的高度。

我正在使用 ng-style 动态传递 css。如果我不渲染图表，ng-style 工作正常（http://jsfiddle.net/7veB2/ ）。

该链接 ( http://jsfiddle.net/gsthilak/atwyh073/ ) 有一个水平方式的工作 highcharts 条形图。

我正在尝试在下面的 JSFiddle 链接中呈现 id="container" 中的图表，但它不会呈现图表。

JSFiddle（不工作）链接：http: //jsfiddle.net/gsthilak/7veB2/19/

我正在尝试动态更改图表的高度，因为如果小空间内的条形太多，图表会显得局促。

JS 代码如下所示：

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.myStyle= {
        "width":"900px",
        "background":"red"
    }
    $scope.chartHeight = 400+"px"
    $scope.chartStyle = {
        "height":$scope.chartHeight,
        "margin":"0 auto",
        "min-width":"310px",
        "max-width":"624px"
    }
}

var baseValue = 0;
var shadowBaseValue = 0;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    credits: {},
    exporting: {},
    legend: {},
    title: {
        text: outputTitle
    },
    subtitle: {
        text: "MM $"
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
                    if (this.series.userOptions.labels === undefined) {
                        return this.y + baseValue;
                    }
                    return this.key === "Combined Uncertainty" || this.key === "" ? "" : this.series.userOptions.labels[index];
                }
            }
        }
    },
    xAxis: {
        title: {
            text: 'Factor'
        },
        allowDecimals: false,
        categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty', '']
    },
    yAxis: [{
        title: {
            text: 'MM $'
        },
        labels: {
            formatter: function () {
                return this.value + baseValue;
            }
        }
    }],
    series: [{
        threshold: 29.5,
        name: 'Low',
        grouping: false,
        type: 'bar',
        data: [{
            x: 0,
            y: 12.15 - baseValue,
        }, {
            x: 1,
            y: 15.45 - baseValue,
        }, {
            x: 2,
            y: 31.25 - baseValue,
        }, {
            x: 3,
            y: 12.15 - baseValue,
        }],
        labels: [10, 5, 1, 2]
    }, {
        threshold: 29.5,
        name: 'High',
        grouping: false,
        type: 'bar',
        data: [{
            x: 0,
            y: 46.86 - baseValue,
        }, {
            x: 1,
            y: 42.28 - baseValue,
        }, {
            x: 2,
            y: 27.77 - baseValue,
        }, {
            x: 3,
            y: 46.86 - baseValue,
        }],
        labels: [30, 10, 3, 4]
    }]
});

HTML 代码如下所示：

<div ng-app="myApp" ng-controller="ctrl">
    <div id="container" ng-style="chartStyle"></div>
    <div style="width: 250px; overflow: scroll; " >
        <div ng-style="myStyle">Hello!</div>
    </div>
</div>

请帮我解决这个问题。谢谢！

4

0 回答 0