基于VML与HTML5 Canva实现的跨浏览器饼图与折线图

本文将介绍基于VML（Vector Markup Language）与HTML5 Canva实现的跨浏览器饼图与折线图。饼图与折线图是常见的可视化数据展示方式，在网页中可以用于数据分析、访客统计等。由于不同浏览器对技术的支持不同，因此需要实现跨浏览器的可视化图表。

一、跨浏览器饼图的实现

使用VML技术，可以在IE浏览器中绘制饼图。VML是微软开发的矢量图形标记语言，可扩展性较好，可以在IE6以上版本中支持。但在其他浏览器中不支持。

而HTML5 Canva技术则可以在现代浏览器中绘制饼图，如Chrome、Firefox、Safari等。HTML5 Canva是一个基础绘图API，可在浏览器环境下为2D图形提供绘制支持。但在IE8以下浏览器中不支持。

因此，我们可以结合VML与HTML5 Canva技术，实现跨浏览器的饼图，具体实现如下：

1、先使用VML技术，在IE浏览器中绘制饼图。创建一个Pie类，继承自VML的Path类，使用arcTo方法绘制路径，代码如下：

function Pie(x, y, r, sA, eA) {
  var start = (sA + 90) * Math.PI/180,
      end = (eA + 90) * Math.PI/180;
  var x1 = x + Math.cos(start),
      y1 = y + Math.sin(start),
      x2 = x + Math.cos(end),
      y2 = y + Math.sin(end);
  var path = "M" + x + ' ' + y + " L" + x1 + " " + y1 + " A" + r + " " + r + " 0 " + ((eA - sA > 180) ? 1 : 0) + " 1 " + x2 + " " + y2 + " z";
  Path.call(this, path);
}

2、在其他现代浏览器中，判断是否支持Canva技术，若支持，则使用Canva技术绘制饼图。使用arc方法绘制路径，代码如下：

function Pie(x, y, r, sA, eA) {
  var canvas = document.getElementById('canvas');
  var cxt = canvas.getContext('2d');
  sA = sA * Math.PI/180;
  eA = eA * Math.PI/180;
  var colors = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"];
  for (var i = 0; i < colors.length; i++) {
    cxt.fillStyle = colors[i];
    cxt.beginPath();
    cxt.moveTo(x, y);
    cxt.arc(x, y, r, sA, eA, false);
    cxt.closePath();
    cxt.fill();
    sA = eA;
    eA = eA + (30 * Math.PI/180);
  }
}

3、在HTML中，通过设置条件判断，在不同浏览器中调用对应的函数，实现跨浏览器的饼图。代码如下：

<!--[if IE]>
  <script type="text/javascript">
    var pie = new Pie(50, 50, 50, 0, 90);
    document.getElementById('pieContainer').appendChild(pie);
  </script>
<![endif]-->
<!--[if !IE]>
  <canvas id="canvas" width="100" height="100"></canvas>
  <script type="text/javascript">
    var pie = new Pie(50, 50, 50, 0, 90);
    pie();
  </script>
<![endif]-->

二、跨浏览器折线图的实现

1、使用VML技术，在IE浏览器中绘制折线图。创建一个Line类，继承自VML的Path类，使用lineTo方法绘制路径，代码如下：

function Line(points, stroke, weight) {
  var path = "M" + points[0][0] + "," + points[0][1];
  for (var i = 1; i < points.length; i++) {
    path += " L" + points[i][0] + "," + points[i][1];
  }
  Path.call(this, path);
  this.setFill(false);
  this.setStroke(stroke);
  this.setStrokeWeight(weight);
}

2、使用SVG技术，在非IE浏览器中绘制折线图。创建一个SVG折线元素，使用polyline方法绘制路径，代码如下：

function Line(points, stroke, weight) {
  var svgns = "http://www.w3.org/2000/svg";
  var polyline = document.createElementNS(svgns, 'polyline');
  var pointsStr = '';
  for (var i = 0; i < points.length; i++) {
    pointsStr += points[i][0] + ',' + points[i][1] + ' ';
  }
  polyline.setAttributeNS(null, 'points', pointsStr);
  polyline.setAttributeNS(null, 'stroke', stroke);
  polyline.setAttributeNS(null, 'stroke-width', weight);
  polyline.setAttributeNS(null, 'fill', 'none');
  return polyline;
}

3、在HTML中，通过设置条件判断，在不同浏览器中调用对应的函数，实现跨浏览器的折线图。代码如下：

<!--[if IE]>
  <script type="text/javascript">
    var line = new Line([[10, 10], [20, 20], [30, 50], [40, 80], [50, 30]], "#000", 2);
    document.getElementById('lineContainer').appendChild(line);
  </script>
<![endif]-->
<!--[if !IE]>
  <svg xmlns="http://www.w3.org/2000/svg">
    <g>
      <script type="text/javascript">
        var line = new Line([[10, 10], [20, 20], [30, 50], [40, 80], [50, 30]], "#000", 2);
        document.getElementsByTagName('g')[0].appendChild(line);
      </script>
    </g>
  </svg>
<![endif]-->

综上，通过结合VML与HTML5 Canva技术，实现跨浏览器的饼图与折线图，并判断浏览器是否支持对应技术，来实现不同浏览器的兼容。这样能够使网页中的可视化数据展示更具有普适性和可靠性，提高网页的用户体验。