amcharts结合handsontable实现可编辑表格实时转成图表效果-html代码-BFW代码库

amcharts结合handsontable实现可编辑表格实时转成图表效果

代码语言：html

所属分类：图表

代码描述：amcharts结合handsontable实现可编辑表格实时转成图表效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/handsontable.full.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  font-family: Lato;
}

#chartdiv {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/handsontable.js"></script>
<div id="chartdiv"></div>
<div id="data"></div>

<script>
/**
 * Create the chart
 */
function createChart(data) {
  
  return AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": data,
    "valueAxes": [{
      "gridAlpha": 0.07,
      "position": "left",
      "title": "Traffic incidents"
    }],
    "graphs": [{
      "lineThickness": 2,
      "bullet": "round",
      "title": "Cars",
      "valueField": "cars"
    }, {
      "lineThickness": 2,
      "bullet": "diamond",
      "bulletSize": 12,
      "title": "Motorcycles",
      "valueField": "motorcycles"
    }, {
      "lineThickness": 2,
      "bullet": "square",
      "title": "Bicycles",
      "valueField".........完整代码请登录后点击上方下载按钮下载查看