آموزش رسم نمودار با Highcharts (جلسه 16) - نمودارهای ستونی افقی - قسمت 2

خرید بک لینک

<html>

<head>

<title>Highcharts Tutorial</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

var chart = {

type: 'bar'

};

var title = {

text: 'Historic World Population by Region'

};

var subtitle = {

text: 'Source: Wikipedia.org'

};

var xAxis = {

categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],

title: {

text: null

}

};

var yAxis = {

min: 0,

title: {

text: 'Population (millions)',

align: 'high'

},

labels: {

overflow: 'justify'

}

};

var tooltip = {

valueSuffix: ' millions'

};

var plotOptions = {

bar: {

dataLabels: {

enabled: true

}

},

series: {

stacking: 'normal'

}

};

var legend = {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -40,

y: 100,

floating: true,

borderWidth: 1,

backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

shadow: true

};

var credits = {

enabled: false

};

var series = [{

name: 'Year 1800',

data: [107, 31, 635, 203, 2]

}, {

name: 'Year 1900',

data: [133, 156, 947, 408, 6]

}, {

name: 'Year 2008',

data: [973, 914, 4054, 732, 34]

}];

var json = {};

json.chart = chart;

json.title = title;

json.subtitle = subtitle;

json.tooltip = tooltip;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.series = series;

json.plotOptions = plotOptions;

json.legend = legend;

json.credits = credits;

$('#container').highcharts(json);

});

</script>

</body>

</html>

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 254 تاريخ: شنبه 8 خرداد 1395 ساعت: 2:58

صفحه بندی

خبرنامه