Создание графика

by pharma_nsk

HTML

<body>
<h1>Creating a chart</h1>
<p>To create a chart, we need to instantiate the <code>Chart</code> class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example.</p>

<div><code>&lt;canvas <span class="attribute">id</span>=<span class="value">"myChart"</span> <span class="attribute">width</span>=<span class="value">"400"</span> <span class="attribute">height</span>=<span class="value">"400"</span>&gt;&lt;/canvas&gt;</code></div>

<div><code><span class="comments">// Get the context of the canvas element we want to select</span><br>
<span class="bold">var</span> ctx = document.getElementById(<span class="value">"myChart"</span>).getContext(<span class="value">"2d"</span>);<br>
var myNewChart = new Chart(ctx).PolarArea(data);</code></div>

<p>We can also get the context of our canvas with jQuery. to do this, we need to get the DOM node out of the jQuery collection, and call the getContext("2d") method on that.</p>

<div><code><span class="comments">// Get context with jQuery - using jQuery's .get() method.</span><br>
<span class="bold">var</span> ctx = $(<span class="value">"#myChart"</span>).get(<span class="attribute">0</span>).getContext(<span class="value">"2d"</span>);<br>
<span class="comments">// This will get the first returned node in the jQuery collection</span><br>
<span class="bold">var</span> myNeChart = <span class="bold">new</span> Chart(ctx);</code></div>

<p>After we're instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays.</p>
<span class="url">www.**********.com</span>
</body>

CSS

@import 'https://fonts.googleapis.com/css?family=Open+Sans';
body {font-family: 'Open Sans', sans-serif; background-color:white;font-size:14px; color:grey; width:520px;}
h1 {font-size:16px;}
code {font-size:14px;}
div {background-color:#F8F8FF; border-radius:5px;margin-bottom:10px; padding:10px; white-space: nowrap; overflow-x:auto; }
.attribute {color:#40E0D0;}
.value {color:#B22222;}
.comments {font-style:italic; color:#D2B48C;}
.bold {font-weight:bold; color:black;}
.url {display:block; position:relative; left:430px; bottom:30px; color:black; font-weight:bold; font-size:13px;}