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

خرید بک لینک

آخرین مطالب

امکانات وب

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

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

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

</head>

<body>

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

<pre id="csv" style="display: none">Date,Time,Temperature

2013-01-01,0,1.3

2013-01-01,1,1.4

2013-01-01,2,1.6

...

...

...

2013-12-31,22,1.8

2013-12-31,23,1.6

</pre>

<script language="JavaScript">

$(document).ready(function() {

(function(H) {

var wrap = H.wrap,

seriesTypes = H.seriesTypes;

H.Series.prototype.getContext = function() {

var canvas;

if (!this.ctx) {

canvas = document.createElement('canvas');

canvas.setAttribute('width', this.chart.plotWidth);

canvas.setAttribute('height', this.chart.plotHeight);

canvas.style.position = 'absolute';

canvas.style.left = this.group.translateX + 'px';

canvas.style.top = this.group.translateY + 'px';

canvas.style.zIndex = 0;

canvas.style.cursor = 'crosshair';

this.chart.container.appendChild(canvas);

if (canvas.getContext) {

this.ctx = canvas.getContext('2d');

}

}

retu this.ctx;

}

H.wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function(proceed) {

var ctx;

if (this.chart.renderer.forExport) {

proceed.call(this);

} else {

if (ctx = this.getContext()) {

H.each(this.points, function(point) {

var plotY = point.plotY,

shapeArgs;

if (plotY !== undefined && !isNaN(plotY) && point.y !== null) {

shapeArgs = point.shapeArgs;

ctx.fillStyle = point.pointAttr[''].fill;

ctx.fillRect(shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height);

}

});

} else {

this.chart.showLoading("Your browser doesn't support HTML5 canvas, <br>please use a mode browser");

}

}

});

}(Highcharts));

var data = {

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

parsed: function() {

start = +new Date();

}

};

var chart = {

type: 'heatmap',

margin: [60, 10, 80, 50]

};

var title = {

text: 'Highcharts extended heat map',

align: 'left',

x: 40

};

var subtitle = {

text: 'Temperature variation by day and hour through 2013',

align: 'left',

x: 40

};

var xAxis = {

type: 'datetime',

min: Date.UTC(2013, 0, 1),

max: Date.UTC(2014, 0, 1),

labels: {

align: 'left',

x: 5,

y: 14,

format: '{value:%B}' // long month

},

showLastLabel: false,

tickLength: 16

};

var yAxis = {

title: {

text: null

},

labels: {

format: '{value}:00'

},

minPadding: 0,

maxPadding: 0,

startOnTick: false,

endOnTick: false,

tickPositions: [0, 6, 12, 18, 24],

tickWidth: 1,

min: 0,

max: 23,

reversed: true

};

var colorAxis = {

stops: [

[0, '#3060cf'],

[0.5, '#fffbbc'],

[0.9, '#c4463a'],

[1, '#c4463a']

],

min: -15,

max: 25,

startOnTick: false,

endOnTick: false,

labels: {

format: '{value}?'

}

};

var series = [{

borderWidth: 0,

nullColor: '#EFEFEF',

colsize: 24 * 36e5, // one day

tooltip: {

headerFormat: 'Temperature<br/>',

pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ?</b>'

},

turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release

}];

var json = {};

json.chart = chart;

json.data = data;

json.title = title;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.colorAxis = colorAxis;

json.series = series;

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

});

</script>

</body>

</html>

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

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

برچسب: نویسنده: استخدام کار بازدید: 179 تاريخ: دوشنبه 7 تير 1395 ساعت: 6:59

صفحه بندی

آرشیو مطالب

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

لینک دوستان

خبرنامه