能解决一部分问题,更完美的解决方法我还在研究中,同求大神指点
更好的解决方法如下:
每次绘图之前先删除canvas节点,重新添加一个。
$('#lineChart').remove()// this is my <canvas>element
$('#lineChartParent').append('<canvas id="lineChart" height="230"></canvas>')
chart.js的背景颜色是可以配置的,根据颜色值确定:<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="../Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var lineChartData = {
// x轴的标示
labels : ["January","February","March","April","May","June","July"],
// 数据,数组中的每一个object代表一条线
datasets : [
{
// 颜色的使用类似于CSS,你也可以使用RGB、HEX或者HSL
// rgba颜色中最后一个值代表透明度
// 填充颜色
fillColor : "rgba(220,220,220,0.5)",
// 线的颜色
strokeColor : "rgba(220,220,220,1)",
// 点的填充颜色
pointColor : "rgba(220,220,220,1)",
// 点的边线颜色
pointStrokeColor : "#fff",
// 与x轴标示对应的数据
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData)
</script>
</body>
</html>
ichartjs怎么改变横坐标之间的距离,如下方法:在iChart对象的coordinate是坐标系的配置项,而该配置项中的scale则是定义坐标系轴刻度的配置类,查看以下代码:
coordinate:{////配置自定义坐标轴
width:640,
height:260,
striped_factor : 0.18,
grid_color:'#4e4e4e',
axis:{
color:'#252525',
width:[0,0,4,4]
},
scale:[{//配置自定义值轴
position:'left', //配置左值轴,即纵轴
start_scale:0,
end_scale:100,
scale_space:10,
scale_size:2,//设置刻度间距
scale_enable : false,
label : {color:'#9d987a',font : '微软雅黑',fontsize:11,fontweight:600},
scale_color:'#9f9f9f'
},{
position:'bottom', //配置底值轴,即横轴
scale_size:3,//设置刻度间距
label : {color:'#9d987a',font : '微软雅黑',fontsize:11,fontweight:600},
scale_enable : false,
labels:labels//自定义的标签文本。(默认为空数组) }]
}
查看以上的代码可以看出scale_size是修改坐标之间的距离,而哪个轴是position标明,值为bottom则为横轴。
备注:chartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合你。 ichartjs目前支持饼图、折线图、区域图、柱形图、条形图、堆积图、组合图。ichartjs是基于Apache License 2.0协议的开源项目。目前的最新版本为2013-06-26发布的v1.2。
ichartjs api 地址:http://www.ichartjs.com/docs/zh/
官方例子:http://www.ichartjs.com/samples/index.html?page=line2d_06.html&pageno=4