آموزش رسم نمودار با Highcharts (جلسه 31) - نمودار ترکیبی - قسمت 1

خرید بک لینک

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 31) - نمودار ترکیبی - قسمت 1

<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 title = {

text: 'Combination chart'

};

var xAxis = {

categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']

};

var labels = {

items: [{

html: 'Total fruit consumption',

style: {

left: '50px',

top: '18px',

color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'

}

}]

};

var series = [{

type: 'column',

name: 'Jane',

data: [3, 2, 1, 3, 4]

}, {

type: 'column',

name: 'John',

data: [2, 3, 5, 7, 6]

}, {

type: 'column',

name: 'Joe',

data: [4, 3, 3, 9, 0]

}, {

type: 'spline',

name: 'Average',

data: [3, 2.67, 3, 6.33, 3.33],

marker: {

lineWidth: 2,

lineColor: Highcharts.getOptions().colors[3],

fillColor: 'white'

}

}, {

type: 'pie',

name: 'Total consumption',

data: [{

name: 'Jane',

y: 13,

color: Highcharts.getOptions().colors[0] // Jane's color

}, {

name: 'John',

y: 23,

color: Highcharts.getOptions().colors[1] // John's color

}, {

name: 'Joe',

y: 19,

color: Highcharts.getOptions().colors[2] // Joe's color

}],

center: [100, 80],

size: 100,

showInLegend: false,

dataLabels: {

enabled: false

}

}];

var json = {};

json.title = title;

json.xAxis = xAxis;

json.labels = labels;

json.series = series;

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

});

</script>

</body>

</html>

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

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

برچسب: نویسنده: استخدام کار بازدید: 377 تاريخ: يکشنبه 23 خرداد 1395 ساعت: 23:09

صفحه بندی

آرشیو مطالب

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

لینک دوستان

خبرنامه