Your First Chart

With Highcharts included in your webpage you are ready to create your first chart.

We will start off by creating a simple bar chart.

Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your chart.
```
<div id="container" style="width:100%; height:400px;"></div>
```

A chart is initialized by adding the JavaScript tag, <script> </script>, anywhere in a webpage, containing the following code. The div from #1 is referenced in the constructor.

$(function () {     var myChart = Highcharts.chart('container', {        chart: {            type: 'bar'        },        title: {            text: 'Fruit Consumption'        },        xAxis: {            categories: ['Apples', 'Bananas', 'Oranges']        },        yAxis: {            title: {                text: 'Fruit eaten'            }        },        series: [{            name: 'Jane',            data: [1, 0, 4]        }, {            name: 'John',            data: [5, 7, 3]        }]    });});

The code above uses the jQuery specific way of launching code on document ready, but this can be replace by general onready handlers.

If you are inserting a Stock chart, there is a separate constructor method called Highcharts.StockChart. In these charts, typically the data is supplied in a separate JavaScript array, either taken from a separate JavaScript file or by an Ajax call to the server.

var chart1; // globally available$(function() {       chart1 = Highcharts.stockChart('container', {         rangeSelector: {            selected: 1         },         series: [{            name: 'USD to EUR',            data: usdtoeur // predefined JavaScript array         }]      });   });

You should now see this chart on your webpage:
Optionally, you can apply a global theme to your charts. A theme is just a set of options that are applied globally through the Highcharts.setOptions method. The download package comes with four predefined themes. To apply a theme from one of these files, add this directly after the highcharts.js file inclusion:

<script type="text/javascript" src="/js/themes/gray.js"></script>

For more details on how the options or settings in Highcharts work see How to set options.

Below is a list of online examples of the examples shown in this article:

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。