爲什麼圖形沒有顯示在使用AngularJs的網頁上？

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.What可能是我犯的錯誤的地方？爲什麼圖形沒有顯示在使用AngularJs的網頁上？

來源

2016-12-18 user217292

這是我遵循的鏈接嘗試使用角度js繪製圖形的示例http://chinmaymk.github.io/angular-charts/ – user217292

控制檯中的任何錯誤或文件未在開發工具網絡中加載？還要確保版本兼容 – charlietfl

您的示例有兩個問題。

1：未設置圖表的高度和寬度。

2：角度圖僅支持D3版本3，您使用的版本D3 4所以你必須降級到D3版本3

在這裏，您去工作示例

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

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

<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>

來源

2016-12-18 01:44:51 Deep

如何在x軸上添加日期？ – user217292

就像說我想知道看到3年的數據..或更多的兩個系列x和y。我怎麼能做到這一點？請幫助我.. – user217292

是否要顯示折線圖？此鏈接是否有幫助https://jtblin.github.io/angular-chart.js/ – Deep

爲什麼圖形沒有顯示在使用AngularJs的網頁上？

回答

相關問題