Question

This is my index.html file

<body ng-controller="MainController">

    <select ng-model="chartType">
        <option value="pie">pie</option>
        <option value="bar">bar</option>
        <option value="line">line</option>
        <option value="point">point</option>
        <option value="area">area</option>
    </select>

    <span ng-show="chartType==='pie'">
        <label for="innerRadius">Radius:</label>
        <input ng-model="config1.innerRadius" type="number" id="innerRadius" />
    </span>

    <br />

    <div id="chart1" ac-chart="chartType" ac-data="data1" ac-config="config1"></div>

    <div id="chart2" ac-chart="chartType" ac-data="data2" ac-config="config2"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="angular-charts.min.js"></script>
    <script src="main.controller.js"></script>

    <!-- styling which overrides defaults must be loaded after "angular-charts.js" -->
    <style>
        .ac-tooltip {
            color: black;
            border: 2px solid rgba(200,200,0,0.8);
            background-color: rgba(200,200,0,0.5);
        }

        #chart1 .ac-legend-box {
            border-radius: 10px;
        }

    </style>
</body>
</html>

And the controller js for it is

angular.module('example', ['angularCharts']);

function MainController($scope) {
    $scope.data1 = {
        series: ['Sales', 'Income', '<i>Expense</i>', 'Laptops', 'Keyboards'],
        data: [{
            x: "Sales",
            y: [100, 500, 0],
            tooltip: "this is tooltip"
        }, {
            x: "Not Sales",
            y: [300, 100, 100]
        }, {
            x: "Tax",
            y: [351]
        }, {
            x: "Not Tax",
            y: [54, 0, 879]
        }]
    };

    $scope.data2 = {
        series: ['<em>500</em> Keyboards', '<em>105</em> Laptops', '<em>100</em> TVs'],
        data: [{
            x: "Sales",
            y: [100, 500, 0],
            tooltip: "this is tooltip"
        }, {
            x: "Income",
            y: [300, 100, 100]
        }, {
            x: "Expense",
            y: [351, 50, 25]
        }]
    }

    $scope.chartType = 'bar';

    $scope.config1 = {
        labels: false,
        title: "Products",
        legend: {
            display: true,
            position: 'left'
        },
        innerRadius: 0
    };

    $scope.config2 = {
        labels: false,
        title: "HTML-enabled legend",
        legend: {
            display: true,
            htmlEnabled: true,
            position: 'right'
        },
        lineLegend: 'traditional'
    }
}

添加了依赖项文件“angular-charts.min”和“Chart.min”。但问题是我无法在网页上看到图表，除了我点击index.html时的下拉列表。这可能是我犯错误的问题？

Answer 1

您的示例有两个问题。

1：未设置图表的高度和宽度。

2：角度图表仅支持d3版本3，您使用的是d3版本4，因此您必须降级到d3版本3.

在这里你可以找到工作实例

＆＃13;

var app = angular.module('example', ['angularCharts']);

app.controller("MainController", function($scope) {
    $scope.data1 = {
        series: ['Sales', 'Income', '<i>Expense</i>', 'Laptops', 'Keyboards'],
        data: [{
            x: "Sales",
            y: [100, 500, 0],
            tooltip: "this is tooltip"
        }, {
            x: "Not Sales",
            y: [300, 100, 100]
        }, {
            x: "Tax",
            y: [351]
        }, {
            x: "Not Tax",
            y: [54, 0, 879]
        }]
    };

    $scope.data2 = {
        series: ['<em>500</em> Keyboards', '<em>105</em> Laptops', '<em>100</em> TVs'],
        data: [{
            x: "Sales",
            y: [100, 500, 0],
            tooltip: "this is tooltip"
        }, {
            x: "Income",
            y: [300, 100, 100]
        }, {
            x: "Expense",
            y: [351, 50, 25]
        }]
    }

    $scope.chartType = 'bar';

    $scope.config1 = {
        labels: false,
        title: "Products",
        legend: {
            display: true,
            position: 'left'
        },
        innerRadius: 2
    };

    $scope.config2 = {
        labels: false,
        title: "HTML-enabled legend",
        legend: {
            display: true,
            htmlEnabled: true,
            position: 'right'
        },
        lineLegend: 'traditional'
    }
});

＆＃13;

    <style>
        .ac-tooltip {
            color: black;
            border: 2px solid rgba(200,200,0,0.8);
            background-color: rgba(200,200,0,0.5);
        }

        #chart1 .ac-legend-box {
            border-radius: 10px;
        }

#chart1 {
height: 400px;
width: 800px;
}

#chart2 {
height: 400px;
width: 800px;
}

＆＃13;

<body ng-app="example" ng-controller="MainController">

    <select ng-model="chartType">
        <option value="pie">pie</option>
        <option value="bar">bar</option>
        <option value="line">line</option>
        <option value="point">point</option>
        <option value="area">area</option>
    </select>

    <span ng-show="chartType==='pie'">
        <label for="innerRadius">Radius:</label>
        <input ng-model="config1.innerRadius" type="number" id="innerRadius" />
    </span>

    <br />

    <div id="chart1" ac-chart="chartType" ac-data="data1" ac-config="config1"></div>

    <div id="chart2" ac-chart="chartType" ac-data="data2" ac-config="config2"></div>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.js"></script>

  
</body>

＆＃13;

为什么图表没有显示在使用AngularJs的网页上？

1 个答案: