delphi的chart如何使用方法

最近经常有同学用到js生成各种图表的应用, 这里分别举简单实例来说明下应用。

在应用图片生成前

第一步：先引入 c文件<script type="text/javascript" src="C"></script>

第二步：<canvas id="myChart" width="400" height="400"></canvas>

为了创建图表，我们要实例化一个Chart对象

1. 极形区域图表

var data =[

{

value :30,

color:"#D97041"

},

{

value :90,

color:"#C7604C"

},

{

value :24,

color:"#21323D"

},

{

value :58,

color:"#9D9B7F"

},

{

value :82,

color:"#7D4F6D"

},

{

value :8,

color:"#584A5E"

}

];

var ctx = document.getElementById("myChart").getContext("2d");

newChart(ctx).PolarArea(data);

极形区域图表

2. 饼图

var data =[

{

value:30,

color:"#F38630"

},

{

value :50,

color :"#E0E4CC"

},

{

value :100,

color :"#69D2E7"

}

];

var ctx = document.getElementById("myChart").getContext("2d");

newChart(ctx).Pie(data);

饼图

3. 线性图

var data ={

labels :["January","February","March","April","May","June","July"],

datasets :[

{

fillColor :"rgba(220,220,220,0.5)",

strokeColor :"rgba(220,220,220,1)",

pointColor :"rgba(220,220,220,1)",

pointStrokeColor :"#fff",

data :[65,59,90,81,56,55,40]

},

{

fillColor :"rgba(151,187,205,0.5)",

strokeColor :"rgba(151,187,205,1)",

pointColor :"rgba(151,187,205,1)",

pointStrokeColor :"#fff",

data :[28,48,40,19,96,27,100]

}

]

}

var ctx = document.getElementById("myChart").getContext("2d");

newChart(ctx).Line(data);

线性图

4. 环形图

var data =[

{

value:30,

color:"#F38630"

},

{

value :50,

color :"#E0E4CC"

},

{

value :100,

color :"#69D2E7"

}

];

var ctx = document.getElementById("myChart").getContext("2d");

newChart(ctx).Doughnut(data);

环形图

5. 柱状图

var data ={

labels :["一月","二月","三月","四月","五月","六月","七月"],

datasets :[

{

fillColor :"rgba(220,220,220,0.5)",

strokeColor :"rgba(220,220,220,1)",

data :[65,59,90,81,56,55,40]

},

{

fillColor :"rgba(151,187,205,0.5)",

strokeColor :"rgba(151,187,205,1)",

data :[28,48,40,19,96,27,100]

}

]

}

var ctx = document.getElementById("myChart").getContext("2d");

newChart(ctx).Bar(data);

柱状图

6. 雷达图

var data ={

labels :["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],

datasets :[

{

fillColor :"rgba(220,220,220,0.5)",

strokeColor :"rgba(220,220,220,1)",

pointColor :"rgba(220,220,220,1)",

pointStrokeColor :"#fff",

data :[65,59,90,81,56,55,40]

},

{

fillColor :"rgba(151,187,205,0.5)",

strokeColor :"rgba(151,187,205,1)",

pointColor :"rgba(151,187,205,1)",

pointStrokeColor :"#fff",

data :[28,48,40,19,96,27,100]

}

]

}

var ctx = document.getElementById("myChart").getContext("2d");

newChart(ctx).Radar(data);

雷达图

如果大家喜欢我的分享，就关注我哦！