标签: angular-chart
角图不使用requirejs
我正在尝试使用角度图表,但我无法想象如何正确添加依赖项.我收到以下错误 Uncaught TypeError:无法读取 angular-chart.js 中undefined的属性'defaults'
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['angular', 'chart.js'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('angular'), require('chart.js'));
} else {
// Browser globals
factory(angular, Chart);
}
}(function (angular, Chart) {
'use strict';
Chart.defaults.global.responsive = true;
....因为角度和图表都是未定义的.
我的需要配置是
'use strict';
require.config({
baseUrl: '/',
paths: {
'angular': '/scripts/angular',
'angular-route': '/scripts/angular-route',
'ui-bootstrap': '/scripts/ui-bootstrap-tpls-0.13.0.min', …5
推荐指数
推荐指数
1
解决办法
解决办法
1487
查看次数
查看次数
角图表chart.js喷油器错误
我正在尝试用我的应用程序实现角度图表.我安装了angular-chart.js并将chart.js列为依赖项.但是,当我加载我的页面时,我收到以下错误:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
我的问题是:如何让这个错误消失？我已经确认图表是在角度图表之前加载的,但是我无法让这个错误消失.
Here is my index.html:
<!--suppress ALL -->
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="utf-8">
<base href="/">
<!--[if IE]><link rel="shortcut icon" href="assets/img/favicon.ico"><![endif]-->
<link rel="apple-touch-icon-precomposed" href="assets/img/favicon.ico">
<link rel="icon" …5
推荐指数
推荐指数
1
解决办法
解决办法
1386
查看次数
查看次数
angular-chartjs折线图TypeError:t.merge不是函数
我正在尝试使用折线图示例@ http://jtblin.github.io/angular-chart.js/.我收到以下错误.任何人都可以提供一些指示吗？
这是我的代码.我已经尝试将html移出ui-view以查看角度是否有任何问题但是在布局页面上也不起作用.几乎从网站上复制粘贴示例代码.
angular.module('app').controller(controllerId, [
'$scope', function ($scope) {
//Line Chart
$scope.lineLabels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.lineSeries = ['Series A', 'Series B'];
$scope.lineData = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.lineDatasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.lineOptions = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true, …javascript angularjs angularjs-directive chart.js angular-chart
5
推荐指数
推荐指数
1
解决办法
解决办法
1902
查看次数
查看次数
如何在角度图表条形图中使用纯色条
我正在使用angular-chart（基于chart.js）创建一些条形图，但在获取所需的条形样式时遇到了麻烦。我希望条形像这样是纯色：
但我不知道如何摆脱chart.js默认添加的alpha：
我的html看起来像这样：
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar"
chart-labels="ctrl.socialChart.labels"
chart-data="ctrl.socialChart.data"
chart-series="ctrl.socialChart.series"
chart-colors="ctrl.socialChart.colors"
chart-options="ctrl.socialChart.options"></canvas>
</body>
和javascript：
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.socialChart = {
options: {
legend: {
display: true
}
},
labels: ['2012'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
// colors: ['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163, 159, 1)'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data: [[1178], [652], [1004], [838]]
}
}]);
这是一个演示的Plunker：Plunker
我已经找到了许多有关使用rgba表示法（由于某种原因使我完全错误的颜色）和fillColor（我根本无法使用）的信息。很难说出chart.js版本1或2的信息是什么。
任何帮助，将不胜感激。
5
推荐指数
推荐指数
1
解决办法
解决办法
1773
查看次数
查看次数
未定义显示错误图表的Angular chart.js
我是棱角分明的新手.当我尝试执行以下代码时.它在控制台中显示一些错误.ReferenceError:图表未定义.我无法理解错误.所以有人请帮助我.如果问题不正确,请更正问题
我的Html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>school</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="fonts/text-font/css/font_icon.css" type="text/css"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- angular -->
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<!-- angular chart -->
<link rel="stylesheet" href="js/angular/angular-chart.css" type="text/css"/>
<script type="text/javascript" src="js/angular/angular-chart.min.js"></script><br />
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="LineCtrl">
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
</div>
</body >
</html>
我的angular.js:
angular.module("app", ["chart.js"])
// Optional configuration
.config(['ChartJsProvider', function (ChartJsProvider) {
// …4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
如何在chart.js的图例中设置标题？
我将 angular -chart 与 chart.js 一起使用，并希望在鼠标悬停在线上时应用标题说明。我想将标题放在鼠标时的标题中。我可以使用标签来做到这一点，但出现在图形名称下方而我不想要它，如何删除图表下方的名称并只留下图例的标题？
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});
我想删除图表下方的这些文本，只在图例上留下标题。参见图像。这是可能的？
参考：http : //jtblin.github.io/angular-chart.js/
JsFidle：http : //jsfiddle.net/Lfmhcab3/4/
4
推荐指数
推荐指数
1
解决办法
解决办法
4579
查看次数
查看次数
删除AngularCharts中的网格线
我正在使用AngularCharts,它是Chart.js的AgnularJS包装器.我想从我的图表中删除所有网格线,因此只有实际的折线图.但网格没有被删除.
调节器
$scope.labelsx2 = [" ", " ", " ", " Time ago ", " ", " ", " "];
$scope.seriesx2 = [' '];
$scope.datax2 = [
[65, 59, 80, 81, 56, 55, 40]
];
$scope.options = {
scaleShowGridLines : false
};
$scope.labelsx2 = [" ", " ", " ", " Time ago ", " ", " ", " "];
$scope.seriesx2 = [' '];
$scope.datax2 = [
[65, 59, 80, 81, 56, 55, 40]
];
$scope.options = { …4
推荐指数
推荐指数
1
解决办法
解决办法
1943
查看次数
查看次数
如何在角度图表的自定义工具提示中使用 HTML？
是否可以使用 angular-chart 1.0 在图表的工具提示中呈现 HTML？我已经构建了下面的图表，但需要在工具提示的不同行上呈现两个值，但是 br 标签显示为文本
<div ng-app="doughnutApp" ng-controller="DoughnutCtrl as doughnutCtrl">
<canvas id="doughnut"
class="chart chart-doughnut"
chart-data="doughnutCtrl.labelsValues.values"
chart-labels="doughnutCtrl.labelsValues.labels"
chart-options="doughnutCtrl.chartOptions">
</canvas>
</div>
<script>
var app = angular.module('doughnutApp', ['chart.js']);
app.controller('DoughnutCtrl', function() {
var vm = this;
vm.labelsValues = {
"labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"],
"values": [1, 2, 3, 4, 5, 6, 7, 8]
};
vm.chartOptions = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return "Line 1<br/>Line 2";
} …4
推荐指数
推荐指数
1
解决办法
解决办法
4183
查看次数
查看次数
NullInjectorError: InjectionToken NGX_ECHARTS_CONFIG 没有提供者
我正在处理角度应用程序，当我打开我的项目时，它给了我如下错误
ERROR NullInjectorError: R3InjectorError(IndexModule)[InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG -> InjectionToken NGX_ECHARTS_CONFIG]:
NullInjectorError: No provider for InjectionToken NGX_ECHARTS_CONFIG!
at NullInjector.get (http://localhost:4200/vendor.js:71789:21)
at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:100306:31)
at R3Injector.get (http://localhost:4200/vendor.js:84254:29)
at NgModuleRef$1.get (http://localhost:4200/vendor.js:100306:31)
at Object.get (http://localhost:4200/vendor.js:97671:29)
at getOrCreateInjectable (http://localhost:4200/vendor.js:75308:31)
at Module.??directiveInject (http://localhost:4200/vendor.js:87509:10)
尝试安装ngx-echarts
npm install echarts -S
npm install ngx-echarts -S
仍然得到同样的上述错误
4
推荐指数
推荐指数
1
解决办法
解决办法
2080
查看次数
查看次数
在angular-chart.js中使用渐变颜色
我试图使用angular-chart.js版本1.0.0使用angularjs1我的图表渐变,但似乎fillcolor无法识别渐变这里是我的代码下面
var app = angular.module('starter', ['ionic', 'ngCordova', 'chart.js', 'ionic-modal-select']).controller('graphCtrl', function($scope) {
var ctx = document.getElementById('base2').getContext('2d');
var gradient =ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
$scope.labels2 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.data2 = [
[65, -59, 80, 81, -56, 55, -40],
[28, 48, -40, 19, 86, 27, 90]
];
$scope.type2 = 'bar';
$scope.colors2 = [{
fillColor: gradient,gradient angular js not responding
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}, { …3
推荐指数
推荐指数
1
解决办法
解决办法
2587
查看次数
查看次数