?注意:从官方下来的例子都没指定页面编码,在这种情况下,浏览器就会使用默认设置中文编码:GB2312,GBK等;导致无法执行。
?请在html代码中的
标签对里加入?,也就是指定页面编码【只要不是中文编码就行】。
?下载
?官方地址:https://www.sodocs.net/doc/d411721228.html,/JavaScript-Components/Charting/JS-C harts-245/get/JS-Charts_demo.zip (需要注册)
?海外地址:https://www.sodocs.net/doc/d411721228.html,/files/JS-Charts_demo.zip使用入门
? 1 解压:将压缩包中的jscharts.js解压到网站的目录中
? 2 编码转换:在html代码中的
标签对里加入,否则会出错。? 3 引入js:在代码中添加 。? 4 添加容器:在代码中添加
? 5 添加图表所需数据
?方法一:使用json传递数据
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
?方法二:使用外部xml传递数据
?
var myChart = new JSChart('graph', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
?xml的标准格式
?
?最容易出错的地方是中文的使用,需要调整各个文件的编码。
?Customerize-bar
?
?var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
?var colors = ['#CE0000', '#EF2323', '#D20202', '#A70000', '#850000', '#740000', '#530000', '#850000', '#B00000', '#9C0404', '#CE0000', '#BA0000']; ?var myChart = new JSChart('graph', 'bar');
?myChart.setDataArray(myData);
?myChart.colorizeBars(colors);
?myChart.setDataArray(myData);
?myChart.setAxisColor('#9D9F9D');//设置x|y轴的颜色
?myChart.setAxisWidth(1); //设置x|y轴的宽度
?myChart.setAxisNameX('Months');//x轴的文字
?myChart.setAxisNameY('Values');//y轴的文字
?myChart.setAxisNameColor('#655D5D');//x|y轴的文字的颜色
?myChart.setAxisNameFontSize(9);//x|y轴的文字的大小
?myChart.setAxisPaddingLeft(50);//x轴的左边距
?myChart.setAxisValuesDecimals(1); //设置数字的小数点后的位数
?myChart.setAxisValuesColor('#9C1919');//设置x|y轴的数字颜色
?myChart.setTextPaddingLeft(10);//设置y轴文字的左边距
?myChart.setBarValuesColor('#9C1919');//设置bar数据的颜色
?myChart.setBarBorderWidth(0);//设置bar边框大小
?myChart.setTitleColor('#8C8382');//设置标题文字的颜色
?myChart.setGridColor('#5D5F5D');//设置内部GridView的颜色
?myChart.draw();
?
?Customerize-line
?
? var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
?var myChart = new JSChart('graph', 'line');
?myChart.setDataArray(myData);
?myChart.setAxisColor('#656565'); //设置x|y轴的颜色
?myChart.setAxisNameColor('#4A4A4A'); //设置x|y轴文字的颜色
?myChart.setAxisNameFontSize(10); //设置x|y轴文字的大小
?myChart.setAxisNameX('Horizontal axis values'); //设置x轴的文字
?myChart.setAxisNameY('Vertical axis'); //设置y轴的文字
?myChart.setAxisPaddingBottom(60); //设置x轴底部边距
?myChart.setAxisPaddingLeft(180); //设置x轴的左边距
?myChart.setAxisPaddingRight(170); //设置图表的右边距
?myChart.setAxisPaddingTop(65); //设置图表顶部边距
?myChart.setAxisValuesColor('#656565'); //设置x|y轴的数字颜色
?myChart.setAxisValuesNumberX(6); //设置x轴显示数字的个数
?myChart.setBackgroundColor('#EEE'); //设置背景颜色
?myChart.setGrid(false); //设置不显示图标背后的网格
?Customerize-pie
?
?var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
? var colors = ['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66', '#00FF99', '#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
?var myChart = new JSChart('graph', 'pie');
?myChart.setDataArray(myData);//设置数据
?myChart.colorizePie(colors);//设置pie颜色
?myChart.setPiePosition(308, 170);//设置pie 位置
?myChart.setPieRadius(95); //设置圆的缩放大小
?myChart.setPieUnitsFontSize(8); //设置pie外文字的大小
?myChart.setTextPaddingTop(30); //设置标题title的上边距
?myChart.setPieUnitsColor('#474747');//设置pie外文字的颜色
?myChart.setPieValuesColor('#474747');//设置pie内文字的颜色
?myChart.setPieValuesOffset(-10);//设置pie内文字的margin
?myChart.setTitleColor('#fff');
?myChart.setSize(616, 321); //设置背景大小
?myChart.setBackgroundImage('chart_bg.jpg'); //设置背景图片
?//myChart.setTooltip(['Jan', 'custom
contents']);
?myChart.draw();
?
?综合案例:
显示Author地区分布统计图表
?让jsCharts支持中文
正常情况下jsCharts不支持中文字符显示,原因在于JSCharts输出的字符都是它“画”出来的,把代码反编译一下就能发现它最底部附带了数字、英文和常规字符的绘制数据,显而易见,中文是不可能加进去的。
以下插件可以使jsCharts支持中文。如下图所示:
用法有两种:
1 直接用jscharts_mb.js代替jscharts.js;(已经附加到原代码尾部的版本)
2 加载jscharts.js之后再加载jscharts.plugin.mb.js;(独立包含文件的版本)
以上两步任选其一,页面必须编码为UTF-8,
若使用带有中文的xml数据,则xml数据源的编码也要转为UTF-8并且加入encoding="UTF-8"标签;
之后如果要让JSCharts支持中文字符显示,则在生成一个JSChart实例之后紧跟着执行一个函数patchMbString(),如:
var myChart = new JSChart('graph', 'pie');
myChart.patchMbString();
// 接下来的代码和以前一样
如果不执行patchMbString则和原来的没有区别,
此外还加入一个新方法 setFontFamily 用于自定义显示图表的字体,如:myChart.setFontFamily("微软雅黑"); // 设置显示字体为微软雅黑
另外JSChart默认的字体大小只有8px,如果要较清晰地显示中文的话还得加大字号,这个用自带的接口就可以了,如:
myChart.setAxisValuesFontSize(9); // 设置柱状图和线条图的标尺字体大小为9px
myChart.setPieUnitsFontSize(10); // 设置饼图的项目标识字体大小为10px