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

خرید بک لینک

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 25) - نمودارهای دایره ای - قسمت 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>

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

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

</head>

<body>

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

<script language="JavaScript">

$(document).ready(function() {

Highcharts.data({

csv: document.getElementById('tsv').innerHTML,

itemDelimiter: 't',

parsed: function(columns) {

var brands = {},

brandsData = [],

versions = {},

drilldownSeries = [];

// Parse percentage strings

columns[1] = $.map(columns[1], function(value) {

if (value.indexOf('%') === value.length - 1) {

value = parseFloat(value);

}

retu value;

});

$.each(columns[0], function(i, name) {

var brand, version;

if (i > 0) {

// Remove special edition notes

name = name.split(' -')[0];

// Split into brand and version

version = name.match(/([0-9]+[.0-9x]*)/);

if (version) {

version = version[0];

}

brand = name.replace(version, '');

// Create the main data

if (!brands[brand]) {

brands[brand] = columns[1][i];

} else {

brands[brand] += columns[1][i];

}

// Create the version data

if (version !== null) {

if (!versions[brand]) {

versions[brand] = [];

}

versions[brand].push(['v' + version, columns[1][i]]);

}

}

});

$.each(brands, function(name, y) {

brandsData.push({

name: name,

y: y,

drilldown: versions[name] ? name : null

});

});

$.each(versions, function(key, value) {

drilldownSeries.push({

name: key,

id: key,

data: value

});

});

var chart = {

type: 'pie'

};

var title = {

text: 'Browser market shares. November, 2013'

};

var subtitle = {

text: 'Click the slices to view versions. Source: netmarketshare.com.'

};

var xAxis = {

type: 'category'

};

var yAxis = {

title: {

text: 'Total percent market share'

}

};

var tooltip = {

headerFormat: '<span style="font-size:11px">{series.name}</span><br>',

pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'

};

var credits = {

enabled: false

};

var series = [{

name: 'Brands',

colorByPoint: true,

data: brandsData

}];

var drilldown = {

series: drilldownSeries

}

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;

json.drilldown = drilldown;

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

}

});

});

</script>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->

<pre id="tsv" style="display:none">

Browser Version Total Market Share

Microsoft Inteet Explorer 8.0 26.61%

Microsoft Inteet Explorer 9.0 16.96%

Chrome 18.0 8.01%

Chrome 19.0 7.73%

Firefox 12 6.72%

Microsoft Inteet Explorer 6.0 6.40%

Firefox 11 4.72%

Microsoft Inteet Explorer 7.0 3.55%

Safari 5.1 3.53%

Firefox 13 2.16%

Firefox 3.6 1.87%

Opera 11.x 1.30%

Chrome 17.0 1.13%

Firefox 10 0.90%

Safari 5.0 0.85%

Firefox 9.0 0.65%

Firefox 8.0 0.55%

Firefox 4.0 0.50%

Chrome 16.0 0.45%

Firefox 3.0 0.36%

Firefox 3.5 0.36%

Firefox 6.0 0.32%

Firefox 5.0 0.31%

Firefox 7.0 0.29%

Proprietary or Undetectable 0.29%

Chrome 18.0 - Maxthon Edition 0.26%

Chrome 14.0 0.25%

Chrome 20.0 0.24%

Chrome 15.0 0.18%

Chrome 12.0 0.16%

Opera 12.x 0.15%

Safari 4.0 0.14%

Chrome 13.0 0.13%

Safari 4.1 0.12%

Chrome 11.0 0.10%

Firefox 14 0.10%

Firefox 2.0 0.09%

Chrome 10.0 0.09%

Opera 10.x 0.09%

Microsoft Inteet Explorer 8.0 - Tencent Traveler Edition 0.09%

</pre>

</body>

</html>

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

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

برچسب: نویسنده: استخدام کار بازدید: 274 تاريخ: دوشنبه 17 خرداد 1395 ساعت: 11:48

صفحه بندی

آرشیو مطالب

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

لینک دوستان

خبرنامه