如何在Highcharts中调用CSV文件实现图表功能

第一步，新建静态页面line.html，引入HighCharts核心js文件，如下图所示：

第二步，插入折线图容器，设置折线图宽度和高度，如下图所示：

第三步早虚改，编写生成HighCharts折线图的js代码，如下图所示：

第四步，预览该静态页面，查看折线图效果，如下图所示：

第五步，添加如陆判下代码

line:{

dataLabels:{

enabled:true

}

}

如下图所示：

6

第六步，再次预览该界面，誉旦可以看到图形上点数据显示出来了，如下图所示：

在Axure中也有统计图表，主要功能是各种数据处理，统计和分析。主要有2种方法设计统计图表

【1】利用excel设计统计图表

1.利用execl做一个表格，并将做成图表

2.将图表截图保存，并打开axure

3.通过图片元件将学生成绩统计图导入到Axure

【2】利用HighCharts设计统计图表

1.打开axure，并利用内联框架加载

2.添加链接--选中双击d出链接庆租属性

3.HighCharts文件夹要跟生成的文件夹放在一起。

4. HighCharts文件夹

【说明】

1.利用答差明excel设计统计图表，这个是静态的是不能修改的。如果想要动态的图表就需要利用HighCharts

2.利用HighCharts设计统计图表时清告，需要注意一点，这个需要按F8(生成网页)才有效果，这个是预览不了的

工具/材料

SublimeText

打卡枝衫答SublimeText，新建HTML5页面，然后在页面中插入jquery和highcharts的脚本文件，如下图所示

然后在body元素中定义放置柱形图的div容器，如下图所示，注意给div设置宽和高

接下来在script中订单柱状图的标题，副标题，X，Y坐标轴的配置信息，如下图所示

然后就是准备柱状图的数据了，如下图所示，数据要和上面定义的X坐标轴进行匹配

接下来就是将所有准备好的数据塌碧和参数配置都放在json中，如下图所示，highcharts只接受json的传参方式

一切准备好之后，下面你就可以调用highcharts方法，并且传入所准备的json串来生成柱状图，如下图所猛慧示

最后，运行页面程序以后，你就可以看到自己定义的柱状图了，如下图所示

---