{"id":380,"date":"2024-09-16T13:18:25","date_gmt":"2024-09-16T11:18:25","guid":{"rendered":"https:\/\/www.papadia.org\/?p=380"},"modified":"2024-09-16T13:18:25","modified_gmt":"2024-09-16T11:18:25","slug":"creare-grafici-in-angular-cli-con-angular-highcharts","status":"publish","type":"post","link":"https:\/\/www.papadia.org\/?p=380","title":{"rendered":"Creare grafici in Angular CLI con Angular Highcharts"},"content":{"rendered":"\n<p>Come prima azione occorre installare Angular Highcharts, le informazioni sono nella pagina alla seguente URL:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/package\/angular-highcharts\">https:\/\/www.npmjs.com\/package\/angular-highcharts<\/a><\/p>\n\n\n\n<p>In sostanza occorre effettuare l&#8217;installazione con il comando <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i angular-highcharts highcharts<\/code><\/pre>\n\n\n\n<p>N.B. ho aggiunto <em><strong>highcharts<\/strong> <\/em>per installare <strong>angular-highcharts<\/strong> e <strong>highcharts<\/strong><\/p>\n\n\n\n<p>Una volta effettuata l&#8217;installazione occorre importare il modulo installato inserendo i riferimenti nel file <strong>app.module.ts<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.module.ts\nimport { ChartModule } from 'angular-highcharts';\n\n@NgModule({\n  imports: &#91;\n    ChartModule \/\/ add ChartModule to your imports\n  ]\n})\nexport class AppModule {}<\/code><\/pre>\n\n\n\n<p>Per l&#8217;utilizzo qui di seguito un esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ chart.component.ts\nimport { Chart } from 'angular-highcharts';\n\n@Component({\n  template: `\n    &lt;button (click)=\"add()\"&gt;Add Point!&lt;\/button&gt;\n    &lt;div &#91;chart]=\"chart\"&gt;&lt;\/div&gt;\n  `\n})\nexport class ChartComponent {\n  chart = new Chart({\n    chart: {\n      type: 'line'\n    },\n    title: {\n      text: 'Linechart'\n    },\n    credits: {\n      enabled: false\n    },\n    series: &#91;\n      {\n        name: 'Line 1',\n        data: &#91;1, 2, 3]\n      }\n    ]\n  });\n\n  \/\/ add point to chart serie\n  add() {\n    this.chart.addPoint(Math.floor(Math.random() * 10));\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Come prima azione occorre installare Angular Highcharts, le informazioni sono nella pagina alla seguente URL: https:\/\/www.npmjs.com\/package\/angular-highcharts In sostanza occorre effettuare<\/p>\n","protected":false},"author":2,"featured_media":381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[5,6,11],"tags":[],"class_list":["post-380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-latest","category-primo-piano","category-sviluppo"],"_links":{"self":[{"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.papadia.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=380"}],"version-history":[{"count":6,"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":392,"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/posts\/380\/revisions\/392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.papadia.org\/index.php?rest_route=\/wp\/v2\/media\/381"}],"wp:attachment":[{"href":"https:\/\/www.papadia.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.papadia.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.papadia.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}