私はhtml5とjavascriptを初めて使用します。
初めてhtml5、javascript、css3円グラフ**（jqueryを使用しない）**を作成しようとしています。円グラフは、chromeとfirefoxで完全に作成できます。その後、しばらくして、Internet Explorer（IE）で誤ってindex.htmlを開いたのですが、円グラフが表示されません。後で、コモドのブラウザでさえ円グラフが表示されないことに気付きました。
試してみました
1）グーグル、そしてexcanvas.jsと呼ばれるものを見ました。
2）この行をindex.htmlに含めます
<!-- can't post script with arrow bracket in stackoverflow, uncomment & replace < with |-->
<!-- |script src="./js/excanvas.js"||/script|-->
3）この行をpie_chart_simple.js initialize_para（）関数に含めます。
if(typeof canvas.getContext==='undefined')return;
結果：
それでもInternetExplorerで円グラフを表示することはできません。（テーブル値のみが表示されます）
不確実性： 1）excanvas.jsの使用？（jqueryを使用しないためにコードを配置する位置）2）ie？によってデコードされたカラーフォーマット
助けてくれませんか？ありがとうございました。
2つのファイルがあります：
1）index.html：
2）pie_chart_simple.js
（jsfiddleリンク： http ：//jsfiddle.net/torresho/wmJb6/6/ ）
1）index.html
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- can't post script with arrow bracket in stackoverflow, uncomment & replace < with |-->
<!-- |script src="./js/excanvas.js"||/script|-->
<!-- |script type="text/javascript" src="./js/pie_chart_simple.js"||/script| -->
</head>
<body>
<div id="container">
<canvas id="chart" width="380" height="460"></canvas>
<table id="chartData">
<tr>
<th>Club</th><th>Points</th>
</tr>
<tr style="color: #0DA068">
<td>MU</td><td>71</td>
</tr>
<tr style="color: #194E9C">
<td>MC</td><td>59</td>
</tr>
<tr style="color: #ED9C13">
<td>Tot</td><td>54</td>
</tr>
<tr style="color: #ED5713">
<td>Chel</td><td>52</td>
</tr>
<tr style="color: #057249">
<td>Ars</td><td>52</td>
</tr>
</table>
</div>
</body>
</html>
2）pie_chart_simple.js：
// jquery method // Run the code when the DOM is ready
//$( pie_chart_simple );
window.onload=function(){
pie_chart_simple();
}
function pie_chart_simple() {
// Pie Chart Configuration Settings
var chartSizePercent = 55; // The chart radius relative to the canvas width/height (in percent)
var chartStartAngle = -0.5 * Math.PI; // Start the chart at 12 o'clock instead of 3 o'clock
var sliceGradientColour = "#ddd"; // Colour to use for one end of the chart gradient (#ddd = RGB(211,211,211) = light grey)
// Variables for the chart
var canvas; // The canvas element in the page
var canvasWidth; // Width of the canvas, in pixels
var canvasHeight; // Height of the canvas, in pixels
var centreX; // X-coordinate of centre of the canvas/chart
var centreY; // Y-coordinate of centre of the canvas/chart
var chartRadius; // Radius of the pie chart, in pixels
var table; // The table element in the page
var numRows; // The number of rows in the table
var label_array = []; // An array to store the first column values (labels)
var value_array = []; // An array to store the 2nd column values (values)
var chartColors = []; // Chart colors (pulled from the HTML table)
var totalValue = 0; // Total of all the values in the chart
var startAngle = []; // Start angle of each slice
var endAngle = []; // End angle of each slice
var startX =0;
var startY =0;
var change_color=0;
initialize_para();
/********************************** Initialization - starto************************************************/
function initialize_para() {
// Define the canvas element
canvas = document.getElementById('chart');
console.log(canvas);
console.log('canvas='+canvas);
console.log(canvas.getContext);
console.log(typeof canvas.getContext);
console.log(typeof canvas.getContext==='undefined');
// Check if the browser does not support canvas (e.g. ie)
// code goes here...
// Exit if the browser isn't canvas-capable
if ( typeof canvas.getContext === 'undefined' ) return;
// Acquire the parameters to determine the chart size
canvasWidth = canvas.width;
canvasHeight = canvas.height;
centreX = canvasWidth/2;
centreY = canvasHeight/2;
chartRadius = (Math.min(canvasWidth,canvasHeight)/2)*(chartSizePercent/100);
//alert('canvasWidth='+canvasWidth+', canvasHeight='+canvasHeight+' ,chartRadius='+chartRadius); //popup
console.log('canvasWidth='+canvasWidth+', canvasHeight='+canvasHeight+' ,chartRadius='+chartRadius); //log
// Get the pie chart data - labels, values and color (from the html table)
// Alternatively, can be simplified using each() in jquery
table = document.getElementById('chartData');
numRows = table.rows.length;
for (var i = 1; i<numRows; i++) {
var trs = table.getElementsByTagName('tr')[i];
label_array[i-1] = trs.cells[0].innerText; // label
value_array[i-1] = trs.cells[1].innerText; // value
chartColors[i-1] = trs.style.color; // color
totalValue += parseFloat(value_array[i-1]); // total value
console.log(label_array[i-1]+' '+value_array[i-1]+' '+chartColors[i-1]+' '+totalValue);
// MU 71 rgb(13, 160, 104) 71
// MC 59 rgb(25, 78, 156) 130
// Tot 54 rgb(237, 156, 19) 184
// Chel 52 rgb(237, 87, 19) 236
// Ars 52 rgb(5, 114, 73) 288
}
// Compute and store the start and end angles of each slice of the data
var currentPos = 0; //The current position of the slice in the pie(from 0 to 1)
// (3/2)pi radians / -ve pi/2 radians
// ^
// |<
// | ) (starting point is here ccw direction, when drawing in canvas)
//1pi radians-----|----> 0pi radians / 2pi radians
// |
// |
// pi/2 radians
for (var i = 0; i<numRows-1; i++) {
//console.log(i+' '+2*currentPos+'PI');
startAngle[i] = 2*Math.PI*currentPos;
endAngle[i] = 2*Math.PI*(currentPos+(value_array[i]/totalValue));
currentPos += value_array[i]/totalValue;
console.log(i+' '+'Slice'+' '+(i+1)+' StartAngle: '+startAngle[i]+' EndAngle: '+endAngle[i]);
// 0 Slice 1 StartAngle: 0 EndAngle: 1.5489797111449675 pie_chart_simple.js:80
// 1 Slice 2 StartAngle: 1.5489797111449675 EndAngle: 2.8361600344907854 pie_chart_simple.js:80
// 2 Slice 3 StartAngle: 2.8361600344907854 EndAngle: 4.014257279586958 pie_chart_simple.js:80
// 3 Slice 4 StartAngle: 4.014257279586958 EndAngle: 5.148721293383272 pie_chart_simple.js:80
// 4 Slice 5 StartAngle: 5.148721293383272 EndAngle: 6.283185307179586
}
// After working out all the data needed for the chart, draw the chart
drawChart();
//$('#chart').click ( handleChartClick ); // jQuery way
// element.onclick = functionRef;
//canvas.onclick = handleChartClick;
}
/********************************** Initialization - endo************************************************/
/********************************** Draw chart - starto************************************************/
function drawChart() {
// Get the drawing context (canvas tag is use to draw graphics on the fly)
// getContext() method returns an object that provides methods and properties for drawing on the canvas
var context = canvas.getContext('2d');
// Clear the canvas, ready for the new frame
// (x-coordinate of upper-left corner, y-coordinate of upper-left corner,
// width of the rectangle to clear (in pixles), height of the rectangle to clear (in pixels))
context.clearRect(0,0,canvasWidth,canvasHeight);
// Draw an individual slice in the chart iteratively to form a complete circular pie chart
for (slice_number=0; slice_number<numRows-1; slice_number++) {
drawSlice(context,slice_number);
}
} //function drawChart() ends
function drawSlice(context,slice_number) {
// Compute the adjusted start and end angles for the slice (start at 12 o'clock instead of 3 o'clock)
var startAngle_offset = startAngle[slice_number] + chartStartAngle;
var endAngle_offset = endAngle[slice_number] + chartStartAngle;
// Draw the pie from the centre
startX = centreX;
startY = centreY;
// Set the gradient fill for the slice
var sliceGradient = context.createLinearGradient(0,0,canvasWidth*0.75,canvasHeight*0.75);
sliceGradient.addColorStop(0, sliceGradientColour);
sliceGradient.addColorStop(1, chartColors[slice_number]);
//liceGradient.addColorStop(1,'#fff');
//???????????
//sliceGradient.addColorStop(0,"black");
//sliceGradient.addColorStop(1,"white");
//console.log('startAngle_offset='+startAngle_offset+', endAngle_offset='+endAngle_offset); //log
//console.log('startX='+startX+', startY='+startY); //log
//console.log('sliceGradient='+sliceGradient+', sliceGradient.addColorStop(0, sliceGradientColour)='+sliceGradient.addColorStop(0, sliceGradientColour)); //log
//console.log('sliceGradient.addColorStop(1)='+sliceGradient.addColorStop(1,'#fff')+', sliceGradientColour='+sliceGradientColour); //log
//console.log('chartColors[slice_number]='+chartColors[slice_number]+', slice_number='+slice_number); //log
//console.log(' -----');
// Draw the slice
context.beginPath();
context.moveTo(startX,startY);
context.arc(startX,startY,chartRadius,startAngle_offset,endAngle_offset,false); //last field optional. Specifies whether the drawing should be counterclockwise or clockwise. False=clockwise, true=counter-clockwise
context.lineTo(startX,startY);
context.closePath();
if (change_color == 1) {
context.fillStyle = "rgba(0,0,0,0)";
}
else{
context.fillStyle = sliceGradient;}
context.fill();
context.shadowColor = "rgba(0,0,0,0)";
// Draw the slice border
context.stroke();
// add label
context.fillText(label_array[slice_number],startX+slice_number*10+100,startY+slice_number*10+100);
context.fillText(value_array[slice_number],startX+slice_number*10+100,startY+slice_number*10+100+20);
}
/********************************** Draw chart - endo ************************************************/
} // function pie_chart_simple() ends