HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

处理文本或文本数据文件

最后修改时间:2022-12-15 18:28

在数据存储或传输中,我们经常用到一些纯文本格式的数据或数据文件,例如 CSV、XML、JSON 格式的数据或文件。这些数据可以是存储在文件中,也可以是服务端接口提供(还有一种可能是服务端动态生成对应的数据文件)。

在 JS 中,我们可以通过发送请求的形式加载数据文件或数据接口,并按照一定的格式解析处理成 JS 对象并最终创建图表。

下面用示例来说明在 JS 中如何处理 CSV、XML、JSON 数据并创建图表的过程。

一、用 CSV 数据创建图表

CSV 是以逗号分隔的数据格式,其每一行是以逗号分隔每一个数值,文件的后缀是 .csv,默认是用 Excel 打开的,并且 Excel 文件可以转换成 CSV 文件。

1、csv 数据

在下面的 CSV 数据例子中,第一行表示分类,后面的每一行用逗号分隔成,第一个值表示数据列名,其后是数据列的数据。

分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15

2、定义图表配置对象

下面是我们定义图表配置对象的代码:

var options = {
    chart: {
        type: 'column'
    },
    title: {
        text: '水果消费情况'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: '单位'
        }
    },
    series: []
};

其中 series 是一个空数组,我们将在后面 push 数据进行。

3、解析 CSV 数据

我们可以通过 jQuery.get 方法来获取 csv 文件里的数据,并在请求成功回调函数里进行解析数据;

注意不要在 jQuery.get 回调函数之前创建图表,因为该函数是异步的,只有在请求返回数据之后才会执行回调函数。

// 请求 data.csv 数据
$.get('data.csv', function(data) {
    // 分隔每一行
    var lines = data.split('\n');

    // 遍历每一行
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // 处理第一行,即分类
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) {
                    options.xAxis.categories.push(item);
                }
            });
        }

        // 处理其他的每一行
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;   // 数据列的名字
                } else {
                    series.data.push(parseFloat(item)); // 数据,记得转换成数值类型
                }
            });
            // 最后将数据 push 到数据列配置里
            options.series.push(series);
        }
    });

    // 创建图表
    var chart = Highcharts.chart('container', options);
});

在线试一试

二、处理 XML 数据

处理 XML 数据和处理 CSV 数据类类似,只是解析方式不同而已。

XML 是用标签标记数据,这个我们常见的 HTML 语法类似,所以我们可以用 jQuery 来解析,下面用示例说明解析过程:

1、XML 数据

data.xml 的文件内容如下:

<chart>
    <categories>
        <item>苹果</item>
        <item>梨</item>
        <item>橙子</item>
        <item>香蕉</item>
    </categories>
    <series>
        <name>小明</name>
        <data>
            <point>8</point>
            <point>4</point>
            <point>6</point>
            <point>5</point>
        </data>
    </series>
    <series>
        <name>小红</name>
        <data>
            <point>3</point>
            <point>4</point>
            <point>2</point>
            <point>3</point>
        </data>
    </series>
    <series>
        <name>小张</name>
        <data>
            <point>86</point>
            <point>76</point>
            <point>79</point>
            <point>77</point>
        </data>
    </series>
    <series>
        <name>小芳</name>
        <data>
            <point>3</point>
            <point>16</point>
            <point>13</point>
            <point>15</point>
        </data>
    </series>
</chart>

2、解析过程

// 加载 XML 文件
$.get('data.xml', function(xml) {

    // 分隔行
    var $xml = $(xml);

    // 处理分类
    $xml.find('categories item').each(function(i, category) {
        options.xAxis.categories.push($(category).text());
    });

    // 处理数据列
    $xml.find('series').each(function(i, series) {

        var seriesOptions = {
            name: $(series).find('name').text(),
            data: []
        };

        // 处理数据类数据
        $(series).find('data point').each(function(i, point) {
            seriesOptions.data.push(
                parseInt($(point).text())
            );
        });

        // 将数据列对象 push 到数据列数组里
        options.series.push(seriesOptions);
    });

    var chart = Highcharts.chart('container', options);
});

在线试一试

三、处理 JSON 数据

我们知道 Highcharts 的配置本身就是 JSON,所以 JSON 数据无需解析,只需要转换成需要的格式即可,下面是简单的示例说明:

1、JSON 文件内容

[
    [1,12],
    [2,5],
    [3,18],
    [4,13],
    [5,7],
    [6,4],
    [7,9],
    [8,10],
    [9,15],
    [10,22]
]

2、读取 JSON 并创建图表

$(document).ready(function() {

    var options = {
        chart: {
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = Highcharts.chart('container', options);
    });
});

在线试一试

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:处理文本或文本数据文件 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/process-text-data-file/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22