`
wanghetommy
  • 浏览: 30658 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用iChart.create方法创建ichartjs图表

 
阅读更多

有时候,我们可能需要根据后台的配置来生成图表,这样后台发过来的是一个配置对象,这时我们可以利用iChart.create(Object options)方法来创建图表。

options:配置参数,与正常创建图表一样的配置项。这里面多了一个配置项type,表示图表类型。如创建柱形图图表代码片段如下:

 

var chart = iChart.create({
	type:'column2d',//type为必输项
	render : 'canvasDiv',
	data : data,
	title : {
		text : 'This is a sample spirit from HighCharts',
		color : '#3e576f'
	},
	width : 800,
	height : 400
	//...
});

 type列表:

 

type

图表类型
area2d Area2D
bar2d Bar2D
barmulti2d BarMulti2D
barstacked2d BarStacked2D
column2d Column2D
column3d Column3D
columnmulti2d ColumnMulti2D
columnmulti3d ColumnMulti3D
columnstacked2d ColumnStacked3D
columnstacked3d ColumnStacked3D
donut2d Donut2D
linebasic2d LineBasic2D
pie2d Pie2D
pie3d Pie3D

 

分享到:
评论

相关推荐

    ichart.1.2.1.min.js,ichart绘图组件

    总结,ichart.1.2.1.min.js是一款强大且易用的JavaScript绘图组件,通过简洁的API调用就能创建出专业级的数据可视化图表。无论是在企业级应用还是个人项目中,都能发挥其强大的作用,帮助用户更好地理解和解读数据。

    ichart.1.2.src.js

    ichart.1.2.src.js

    ichart.1.2.1.rar

    1、ichartjs是一款基于HTML5的图形库,使用纯javascript语言,利用HTML5的canvas标签绘制各式图形 2、项目中可能会用到饼状图、柱状图、环形图等,ichartjs是一个很不错的插件,体量小,只需引入ichart.1.2.1.min.js...

    利用ichartjs绘制风向风力图

    《利用iChart.js绘制风向风力图》 在数据可视化领域,图表是将复杂数据转化为直观图形的重要手段。iChart.js是一款强大的JavaScript图表库,它提供了丰富的图表类型,包括柱状图、折线图、饼图等,并且支持自定义...

    ichartjs 入门实用教程

    iChart.js 是一款基于 HTML5 的图形库,它使用纯 JavaScript 语言来利用 HTML5 的 canvas 标签绘制各种图形...通过这些内容,开发者可以学习如何使用 iChart.js 来创建复杂而美观的图表,增强 WEB 应用的视觉呈现能力。

    ichart.js绘制虚线、平均分虚线效果的实现代码

    自定义插件的创建使用了`chart.plugin`方法,并传入一个`iChart.Custom`对象。在插件的`drawFn`函数内,计算数据集中的平均值,并利用图表的坐标转换函数`getCoordinate`将平均值转换为图表上对应的高度位置。之后,...

    ichartjs图表

    **ichartjs图表** ichartjs是一款强大的JavaScript图表库,专为前端开发者设计,用于...开发者可以根据自身需求,利用ichartjs提供的API,轻松创建出富有个性和互动性的图表,提升用户体验,使数据更加生动和易懂。

    Java统计各种图形

    首先,iChart.js是一个强大的JavaScript图表库,它允许开发者通过简单的API调用来创建各种复杂的图形。这个库支持多种类型的图表,如折线图、柱状图、饼图、雷达图等,同时也提供了丰富的自定义选项,包括颜色、样式...

    ichartjs图表设置自定义字体单位

    ichartjs是一个流行的JavaScript图表库,它提供了丰富的图表类型和高度可定制化的选项,使得开发者能够创建出美观且功能强大的图表。本篇文章将深入探讨如何在ichartjs中设置自定义字体单位,以便更好地控制图表的...

    ichartjs 源码与example

    - `ichart.1.2.src.js`:这是ichartjs的原始源码文件,未经过压缩和混淆,方便开发者阅读和理解内部实现。源码中包含了完整的函数和类定义,可以查看各个图表类型的实现细节以及数据处理逻辑。 - `ichart.1.2.min....

    统计图表ichartjs的应用demo

    3. 创建图表实例:使用`new iChart.Chart()`创建图表,并传入配置项,如容器ID、数据源、图表类型等。 4. 渲染图表:调用`render()`方法将图表绘制到指定容器。 在“ichartjstest”这个压缩包中,可能包含了一个或...

    基于ichartjs在android上使用html实现各类图表的类库

    2. **构建HTML页面**:使用HTML5的Canvas元素,通过JavaScript调用Ichartjs提供的方法来绘制图表。例如,创建一个柱状图的HTML代码可能如下所示: ```html <!DOCTYPE html> <script src="ichart.min.js"> ...

    Android报表解决方案 使用开源组件iChartjs(二)demo代码

    "<script src='file:///android_asset/iChart.min.js'></script>" + // 引入iChartjs库 "<canvas id='chart'></canvas>" + // 创建画布 "<script>" + "var data = {labels: ['A', 'B', 'C'], datasets: [{data: ...

    Android通过iChartJs实现动态图表、报表的显示Demo

    var chart = new iChart.Line({ render: 'chartContainer', data: data, // 其他配置项... }); chart.draw(); ``` 3. 加载HTML:使用WebView的`loadDataWithBaseURL`或`loadData`方法加载构建好的HTML...

    ichart用法详解

    - `new iChart.Pie2D` 创建了一个新的饼图实例。 - `render` 属性指定了图表渲染的目标容器。 - `title` 设置图表标题。 - `legend` 配置图例是否启用。 - `showpercent` 表示是否显示百分比。 - `decimalsnum` 设置...

    ichartjs例子,动态数据

    ichartjs的核心在于创建图表对象并配置相关参数,例如数据源、图表类型、颜色、标签等。一个简单的初始化代码可能如下: ```javascript var myChart = new iChart.Chart({ render: 'canvasId', // 指定图表渲染的...

    MyichartjsTest ichartjs 实践

    <script src="https://cdn.jsdelivr.net/npm/ichartjs@latest/dist/ichart.min.js"> ``` **三、基本用法** 在`MyichartjsTest`实践中,创建图表的基本步骤包括: 1. **选择容器**:在HTML中定义一个用于展示...

    ichart_环形图例

    var chart = new iChart.Pie('canvas_id', option); ``` 其中,`type: 'pie'` 表示创建的是饼图,可以调整为环形图只需将其改为 `type: 'ring'`。 3. **修改标签名称** 在上述示例中,`data` 数组包含了各个...

    Ichartjs资料

    4. **初始化图表**:使用 IChartJS 的构造函数创建图表实例,并指定容器元素和配置选项。 5. **渲染图表**:调用实例的 `render()` 方法将数据绘制到图表上。 6. **交互处理**:根据需要添加事件监听器,处理用户...

Global site tag (gtag.js) - Google Analytics