آموزش رسم نمودار با Highcharts (جلسه 19) - نمودارهای ستونی عمودی - قسمت 3

خرید بک لینک

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 19) - نمودارهای ستونی عمودی - قسمت 3

<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: 'column'

};

var title = {

text: 'World's largest cities per 2014'

};

var subtitle = {

text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'

};

var xAxis = {

type: 'category',

labels: {

rotation: -45,

style: {

fontSize: '13px',

fontFamily: 'Verdana, sans-serif'

}

}

};

var yAxis = {

min: 0,

title: {

text: 'Population (millions)'

}

};

var tooltip = {

pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'

};

var credits = {

enabled: false

};

var series = [{

name: 'Population',

data: [

['Shanghai', 23.7],

['Lagos', 16.1],

['Instanbul', 14.2],

['Karachi', 14.0],

['Mumbai', 12.5],

['Moscow', 12.1],

['Sao Paulo', 11.8],

['Beijing', 11.7],

['Guangzhou', 11.1],

['Delhi', 11.1],

['Shenzhen', 10.5],

['Seoul', 10.4],

['Jakarta', 10.0],

['Kinshasa', 9.3],

['Tianjin', 9.3],

['Tokyo', 9.0],

['Cairo', 8.9],

['Dhaka', 8.9],

['Mexico City', 8.9],

['Lima', 8.9]

],

dataLabels: {

enabled: true,

rotation: -90,

color: '#FFFFFF',

align: 'right',

format: '{point.y:.1f}', // one decimal

y: 10, // 10 pixels down from the top

style: {

fontSize: '13px',

fontFamily: 'Verdana, sans-serif'

}

}

}];

var json = {};

json.chart = chart;

json.title = title;

json.subtitle = subtitle;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.tooltip = tooltip;

json.credits = credits;

json.series = series;

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

});

</script>

</body>

</html>

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

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

برچسب: نویسنده: استخدام کار بازدید: 260 تاريخ: دوشنبه 10 خرداد 1395 ساعت: 6:33

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه