Comments (4)
I've tried
app.js
import angular from 'angular';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';
import nvd3 from 'nvd3';
angular.module('app', [
Common,
Components
])
.component('nvd3', nvd3)
.component('app', AppComponent);
The controller
class BarGraphController {
constructor() {
this.name = 'barGraph';
}
$onInit() {
this.options = {
chart: {
type: 'multiBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 45,
left: 45
},
clipEdge: true,
//staggerLabels: true,
duration: 500,
stacked: true,
xAxis: {
axisLabel: 'Time (ms)',
showMaxMin: false,
tickFormat: function (d) {
return d3.format(',f')(d);
}
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -20,
tickFormat: function (d) {
return d3.format(',.1f')(d);
}
}
}
};
this.data = [
{
"key": "Stream0",
"values": [
{
"x": 0,
"y": 19.34962967910275
},
{
"x": 1,
"y": 22.90663821412926
},
{
"x": 2,
"y": 27.146867956150217
},
{
"x": 3,
"y": 20.2273045862577
},
{
"x": 4,
"y": 31.24773496499743
},
{
"x": 5,
"y": 28.4219955981908
},
{
"x": 6,
"y": 26.404678901383786
},
{
"x": 7,
"y": 25.288545655200966
},
{
"x": 8,
"y": 20.345422226505697
},
{
"x": 9,
"y": 24.23759274592509
}
]
}
];
console.log(this.data)
}
}
export default BarGraphController;
The html
<div class="primary callout">
<p>Bar Graph in here</p>
<nvd3 options="$ctrl.options"
data="$ctrl.data"></nvd3>
</div>
Putting <nvd3></nvd3>
on any html file does nothing.
from ng6-starter.
I tried this
app.js
import angular from 'angular';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';
import nvd3 from 'nvd3';
angular.module('app', [
Common,
Components
])
.directive('nvd3', nvd3)
.component('app', AppComponent);
html
<div class="primary callout">
<p>Bar Graph in here</p>
<nvd3 options="$ctrl.options"
data="$ctrl.data"></nvd3>
</div>
But I get an error [ng:areq] Argument 'fn' is not a function, got Object
from ng6-starter.
If you still face this issue, you can try to import module like
import '../../node_modules/angular-nvd3/dist/angular-nvd3'
It should get you getting, until you get a better way to import it.
from ng6-starter.
@iamdevlinph the right way to import third party libraries is the following:
import nvd3 from 'angular-nvd3';
angular.module('myApp', [
nvd3,
]);
This worked using your code example:
Some libraries doesn't declare the module export name and that might cause issues in those cases you need to import the files from the full path:
import AngularMDDataTable from 'angular-material-data-table';
import 'angular-material-data-table/dist/md-data-table.css';
Or even use the provide plugin in some cases like jQuery:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.jquery": "jquery"
})
]
from ng6-starter.
Related Issues (20)
- Any plans on updating to Webpack 2? HOT 3
- Document and/or Upgrade Node Version HOT 1
- DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file://./' cannot be created in a document with origin 'null' and URL 'file:///dist/index.html'. HOT 1
- Possibility to turn off minification HOT 3
- Component binding not working properly
- Dealing with nested router HOT 1
- Service inject problem HOT 1
- Unable to add parameters or options to HtmlWebpackPlugin HOT 1
- Dockerfile inclusion HOT 4
- Adding SEO support HOT 1
- Update ui-router legacy import HOT 1
- production build not loading assets
- CORS Proxy HOT 1
- resolve in state definition causes "unknown provider error" in controller HOT 1
- webpack: Failed to compile HOT 1
- Is there a simple example that mimics communication between sibling components?
- Repo name will be confusing soon HOT 1
- Cannot install node-sass dependency HOT 2
- Angular Hybrid | Migrating from NG6-starter to Angular 8 | Need help HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng6-starter.