[[官方文檔]](https://www.chartjs.org/docs/latest/) ---- [TOC] ---- ## Installation Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way. ### npm [](https://npmjs.com/package/chart.js)[](https://npmjs.com/package/chart.js) ~~~bash $ npm install chart.js --save ~~~ ### Bower [](https://libraries.io/bower/chartjs) ~~~bash $ bower install chart.js --save ~~~ ## Integration ### Script Tag ~~~html <script src="path/to/chartjs/dist/Chart.js"></script> <script> var myChart = new Chart(ctx, {...}); </script> ~~~ ### Common JS ~~~javascript var Chart = require('chart.js'); var myChart = new Chart(ctx, {...}); ~~~ ### Bundlers (Webpack, Rollup, etc.) ~~~javascript import Chart from 'chart.js'; var myChart = new Chart(ctx, {...}); ~~~ ### Content Security Policy By default, Chart.js injects CSS directly into the DOM. For webpages secured using [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only`style-src 'self'`is allowed, the following CSS file needs to be manually added to your webpage: ~~~html <link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css"> ~~~ And the style injection must be turned off **before creating the first chart**: ~~~javascript // Disable automatic style injection Chart.platform.disableCSSInjection = true; ~~~ ## Usage Chart.js can be used with ES6 modules, plain JavaScript and module loaders. To create a chart, we need to instantiate the`Chart`class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example. ~~~html <canvas id="myChart" width="400" height="400"></canvas> ~~~ ~~~javascript // Any of the following formats may be used var ctx = document.getElementById('myChart'); //2d context of the canvas var ctx = document.getElementById('myChart').getContext('2d'); //jQuery instance var ctx = $('#myChart'); var ctx = 'myChart'; let chart = new Chart(ctx, { type: 'line', data: {...}, options: {...} }); ~~~ Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own! There are 4 special global settings that can change all of the fonts on the chart. These options are in`Chart.defaults.global`. The global font settings only apply when more specific options are not included in the config. For example, in this chart the text will all be red except for the labels in the legend. ~~~ Chart.defaults.global.defaultFontColor = 'red'; let chart = new Chart(ctx, { type: 'line', data: data, options: { legend: { labels: { // This more specific font property overrides the global property fontColor: 'black' } } } }); ~~~ ### `type` ### `data` ### `options` ## Patterns and Gradients [[官方文檔]](https://www.chartjs.org/docs/latest/general/colors.html) Using the [Patternomaly](https://github.com/ashiguruma/patternomaly) library you can generate patterns to fill datasets. **Usage** ~~~javascript npm install patternomaly ~~~ Generate a single canvas pattern ~~~javascript pattern.draw('square', '#1f77b4'); ~~~ Generate an array of canvas patterns ~~~javascript pattern.generate([ '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728' ]); ~~~ ~~~javascript var chartData = { datasets: [{ data: [45, 25, 20, 10], backgroundColor: [ pattern.draw('square', '#ff6384'), pattern.draw('circle', '#36a2eb'), pattern.draw('diamond', '#cc65fe'), pattern.draw('triangle', '#ffce56') ] }], labels: ['Red', 'Blue', 'Purple', 'Yellow'] }; ~~~