chart.js 重复绘图问题

JavaScript07

chart.js 重复绘图问题,第1张

myLineChart.destroy()

能解决一部分问题,更完美的解决方法我还在研究中,同求大神指点

更好的解决方法如下:

每次绘图之前先删除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