找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 技术交流区 › 前端技术交流 › 查看内容
发新帖

断天涯大虾

社区贡献组

269

主题

272

帖子

1655

积分

社区贡献组

积分
1655

微信认证勋章

最新发帖

前端开发者常用的9个JavaScript图表库

断天涯大虾
社区贡献组   /  发表于：2017-12-19 12:16  /   查看：8026  /  回复：2
本帖最后由 断天涯大虾 于 2017-12-19 12:20 编辑

当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。
对任何一个组织来说，如果能够充分的获取数据、可视化数据和分析数据，那么就能很大程度上帮助了解数据产生的深层次原因，以便据此做出正确的决定。
对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。使用这些库，开发者可以在无需考虑不同的语法所带来的编程难题的情况下，轻松实现将数据转化为易于理解的图表。
下面是挑选出的9个 JavaScript 图表库：
  • Chart.js
  • Chartist
  • FlexChart
  • Echarts
  • NVD3
  • C3.js
  • TauCharts
  • ReCharts
  • Flot



Chart.js
Chart.js 是一种简洁、用户友好的图表库，同时也是基于 HTML5 的 JavaScript 库，用于创建动画、交互式和可自定义的图表和图形。
借助 Chart.js，用户可以轻松直观地查看混合图表类型。默认情况下，也可以使用 Chart.js 创建响应式网页。
Chart.js 库允许用户快速创建可视化数据。Chart.js 易于设置，对初学者十分友好。使用 Chart.js 则不必考虑浏览器的兼容性问题，因为 Chart.js 支持旧浏览器。
使用 npm 安装 Chart.js：
npm install chart.js --save
Chart.js 绘制雷达图的代码示例：
  1. const ctx = document.getElementById("myChart");
  2. const options = {
  3.     scale: {
  4.         // Hides the scale
  5.     }
  6. };
  7. const data = {
  8.     labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
  9.     datasets: [
  10.    　　　　　 {
  11.             data: [-10, -5, -3, -15],
  12.             label: "two",
  13.              borderColor: '#ffc63b'
  14.             },
  15.     　　　　　{
  16.             data: [10, 5, 3, 10],
  17.             label: "three",
  18.             borderColor: '#1d9a58'
  19.             },
  20.             {
  21.         data: [18, 10, 4, 2],
  22.         label: "one",
  23.         borderColor: '#d8463c'
  24.     },
  25. ]
  26. }

  28. const myRadarChart = new Chart(ctx, {
  29.     data: data,
  30.     type: 'radar',
  31.     options: options
  32. });
复制代码


Chartist
Chartist 库很适合于创建美观、响应能力强、阅读友好的图表。Chartist 使用 SVG 来呈现图表。
Chartist 还提供了使用 CSS 媒体查询和创意动画来自定义图表的能力。用户使用 Chartist 在图表设计中实现自己的所有创意。
Chartist 易于配置，也易于使用 Sass 进行定制。但是，它不支持旧浏览器。
使用 Chartist，可以通过 CSS 的样式来美化你的 SVG，用户完全可以现实自己所想的所有图表样式。
使用 npm 安装 Chartist：
npm install chartist --save
Chartist 创建具有自定义标签的饼图的代码示例：
  1. var data = {
  2.   labels: ['Bananas', 'Apples', 'Grapes'],
  3.   series: [20, 15, 40]
  4. };
  5. var options = {
  6.   labelInterpolationFnc: function(value) {
  7.     return value[0]
  8.   }
  9. };
  10. var responsiveOptions = [
  11.   ['screen and (min-width: 640px)', {
  12.     chartPadding: 30,
  13.     labelOffset: 130,
  14.     labelDirection: 'explode',
  15.     labelInterpolationFnc: function(value) {
  16.       return value;
  17.     }
  18.   }],
  19.   ['screen and (min-width: 1024px)', {
  20.     labelOffset: 80,
  21.     chartPadding: 20
  22.   }]
  23. ];
  24. new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
复制代码


FlexChart
FlexChart 是高性能的图表工具。使用 FlexChart，可轻松的将表格数据可视化为业务图表。FlexChart 不但支持常见的图表类型，如折线图、饼状图、面积图等，还支持气泡图、K线图、条形图、漏斗图等高级图表类型。
FlexChart 的使用也十分简单，FlexChart 图表将所有与数据有关的任务都委托给 CollectionView 类，只需操作 CollectionView 类，就能实现过滤、排序和分组数据等功能。
FlexChart 包含的图表元素也比较全面，如图表图例、图表标题、图表页脚、数轴、图表 series 和标签等，用户也可以为图表添加自定义的元素，如平均线和趋势线等。
FlexChart 本质上是一种交互式的图表，不论是数据进行任何的更改，都会自动反应在图表上，如图表曲线随数据放大缩小、过滤、钻取、动画等。
查看 FlexChart 的中文学习指南和旭日图Demo。
FlexChart 绘制柱状图的代码示例：
  1. onload = function() {
  2.   // wrap data in a CollectionView so the grid and chart
  3.   // get notifications
  4.   var data = new wijmo.collections.CollectionView(getData());
  5.   // create the chart
  6.   var theChart = new wijmo.chart.FlexChart('#theChart', {
  7.       itemsSource: data,
  8.     bindingX: 'country',
  9.     series: [
  10.         { binding: 'sales', name: 'Sales' },
  11.       { binding: 'expenses', name: 'Expenses' },
  12.       { binding: 'downloads', name: 'Downloads' }
  13.     ]
  14.   })
  15.   // create a grid to show the data
  16.   var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  17.       itemsSource: data
  18.   })
  19.   // create some random data
  20.   function getData() {
  21.       var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  22.         data = [];
  23.       for (var i = 0; i < countries.length; i++) {
  24.         data.push({
  25.           country: countries[i],
  26.           sales: Math.random() * 10000,
  27.           expenses: Math.random() * 5000,
  28.           downloads: Math.round(Math.random() * 20000),
  29.         });
  30.       }
  31.       return data;
  32.   }
  33. }
复制代码


Echarts
Echarts 是网页的数据可视化方面的一个非常有用的库。使用 Echarts，开发者可以创建直观的、可自定义的交互式图表，让数据的展示和分析变得十分容易。
由于 Echarts 是用普通的 JavaScript 编写的，所以 Echarts 不存在其它图表库存在的无法无缝迁移的问题。
同时，Echarts 也提供了很多官方文档供用户查看。
使用 npm 可以很容易的完成 Echarts 的安装：
npm install echarts --save
Echarts 绘制散点图代码示例：
  1. var dom = document.getElementById("container");
  2. var myChart = echarts.init(dom);
  3. var app = {};
  4. option = null;
  5. option = {
  6.     title: {
  7.         text: 'Large-scale scatterplot'
  8.     },
  9.     tooltip : {
  10.         trigger: 'axis',
  11.         showDelay : 0,
  12.         axisPointer:{
  13.             show: true,
  14.             type : 'cross',
  15.             lineStyle: {
  16.                 type : 'dashed',
  17.                 width : 1
  18.             }
  19.         },
  20.         zlevel: 1
  21.     },
  22.     legend: {
  23.         data:['sin','cos']
  24.     },
  25.     toolbox: {
  26.         show : true,
  27.         feature : {
  28.             mark : {show: true},
  29.             dataZoom : {show: true},
  30.             dataView : {show: true, readOnly: false},
  31.             restore : {show: true},
  32.             saveAsImage : {show: true}
  33.         }
  34.     },
  35.     xAxis : [
  36.         {
  37.             type : 'value',
  38.             scale:true
  39.         }
  40.     ],
  41.     yAxis : [
  42.         {
  43.             type : 'value',
  44.             scale:true
  45.         }
  46.     ],
  47.     series : [
  48.         {
  49.             name:'sin',
  50.             type:'scatter',
  51.             large: true,
  52.             symbolSize: 3,
  53.             data: (function () {
  54.                 var d = [];
  55.                 var len = 10000;
  56.                 var x = 0;
  57.                 while (len--) {
  58.                     x = (Math.random() * 10).toFixed(3) - 0;
  59.                     d.push([
  60.                         x,
  61.                         //Math.random() * 10
  62.                         (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
  63.                     ]);
  64.                 }
  65.                 //console.log(d)
  66.                 return d;
  67.             })()
  68.         },
  69.         {
  70.             name:'cos',
  71.             type:'scatter',
  72.             large: true,
  73.             symbolSize: 2,
  74.             data: (function () {
  75.                 var d = [];
  76.                 var len = 20000;
  77.                 var x = 0;
  78.                 while (len--) {
  79.                     x = (Math.random() * 10).toFixed(3) - 0;
  80.                     d.push([
  81.                         x,
  82.                         //Math.random() * 10
  83.                         (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
  84.                     ]);
  85.                 }
  86.                 //console.log(d)
  87.                 return d;
  88.             })()
  89.         }
  90.     ]
  91. };
  92. ;
  93. if (option && typeof option === "object") {
  94.     myChart.setOption(option, true);
  95. }
复制代码


NVD3
NVD3 是由 Mike Bostock 撰写的基于 D3 的 JavaScript 库。NVD3 允许用户在 Web 应用程序中创建美观的、可复用的图表。
NVD3 具有很强大的图表功能，能够很方便的创建箱形图、旭日形和烛台图等。如果用户想在 JavaScript 图表库中用到大量的能力，推荐试用 NVD3
NVD3 图表库的速度有时可能会成为一个问题，与 Fastdom 安装配合使用，速度会更快。
NVD3 绘制简单的折线图代码示例：
  1. /*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
  2. nv.addGraph(function() {
  3.   var chart = nv.models.lineChart()
  4.                 .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
  5.                 .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
  6.                 .transitionDuration(350)  //how fast do you want the lines to transition?
  7.                 .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
  8.                 .showYAxis(true)        //Show the y-axis
  9.                 .showXAxis(true)        //Show the x-axis
  10.   ;

  12.   chart.xAxis     //Chart x-axis settings
  13.       .axisLabel('Time (ms)')
  14.       .tickFormat(d3.format(',r'));

  16.   chart.yAxis     //Chart y-axis settings
  17.       .axisLabel('Voltage (v)')
  18.       .tickFormat(d3.format('.02f'));

  20.   /* Done setting the chart up? Time to render it!*/
  21.   var myData = sinAndCos();   //You need data...

  23.   d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.   
  24.       .datum(myData)         //Populate the <svg> element with chart data...
  25.       .call(chart);          //Finally, render the chart!

  27.   //Update the chart when window resizes.
  28.   nv.utils.windowResize(function() { chart.update() });
  29.   return chart;
  30. });
  31. /**************************************
  32. * Simple test data generator
  33. */
  34. function sinAndCos() {
  35.   var sin = [],sin2 = [],
  36.       cos = [];

  38.   //Data is represented as an array of {x,y} pairs.
  39.   for (var i = 0; i < 100; i++) {
  40.     sin.push({x: i, y: Math.sin(i/10)});
  41.     sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
  42.     cos.push({x: i, y: .5 * Math.cos(i/10)});
  43.   }

  45.   //Line chart data should be sent as an array of series objects.
  46.   return [
  47.     {
  48.       values: sin,      //values - represents the array of {x,y} data points
  49.       key: 'Sine Wave', //key  - the name of the series.
  50.       color: '#ff7f0e'  //color - optional: choose your own line color.
  51.     },
  52.     {
  53.       values: cos,
  54.       key: 'Cosine Wave',
  55.       color: '#2ca02c'
  56.     },
  57.     {
  58.       values: sin2,
  59.       key: 'Another sine wave',
  60.       color: '#7777ff',
  61.       area: true      //area - set to true if you want this line to turn into a filled area chart.
  62.     }
  63.   ];
  64. }
复制代码

C3.js
与 TauCharts 相同，C3.js 也是一个非常有效的基于 D3 的图表可视化库。另外，C3.js 允许用户创建可定制的具有个人风格的类。
C3.js 看起来是个比较难的库，但是一旦掌握了 C3.js 技巧，就能得心应手的使用了。
有了 C3.js 图表库，即使在第一次渲染之后，用户也可以通过创建回调来更新图表。C3.js 也允许用户为自己的 Web 应用程序创建可复用的图表，从而减少工作量。
使用 npm 安装 C3.js 图表库：
npm install c3
C3.js 绘制组合图的代码示例：
  1. var chart = c3.generate({
  2.     data: {
  3.         columns: [
  4.             ['data1', 30, 20, 50, 40, 60, 50],
  5.             ['data2', 200, 130, 90, 240, 130, 220],
  6.             ['data3', 300, 200, 160, 400, 250, 250],
  7.             ['data4', 200, 130, 90, 240, 130, 220],
  8.             ['data5', 130, 120, 150, 140, 160, 150],
  9.             ['data6', 90, 70, 20, 50, 60, 120],
  10.         ],
  11.         type: 'bar',
  12.         types: {
  13.             data3: 'spline',
  14.             data4: 'line',
  15.             data6: 'area',
  16.         },
  17.         groups: [
  18.             ['data1','data2']
  19.         ]
  20.     }
  21. });
复制代码


TauCharts
TauCharts 是最灵活的 JavaScript 图表库之一。它是基于 D3 创建的，是一个以数据为中心的 JavaScript 图表库，可以改进数据可视化的效果。
TauCharts 十分灵活，访问其 API 也十分轻松。TauCharts 为用户提供了无缝映射和可视化的数据，使用 TauCharts 能够设计出十分美观的数据界面。同时，TauCharts 也和易于学习。
通过 npm 安装 TauCharts：
npm install taucharts
TauCharts 绘制水平线的代码示例：
  1. var defData = [
  2.         {"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, {
  3.             "team": "d",
  4.             "cycleTime": 2,
  5.             "effort": 2,
  6.             "count": 5,
  7.             "priority": "low"
  8.         }, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, {
  9.             "team": "d",
  10.             "cycleTime": 4,
  11.             "effort": 4,
  12.             "count": 3,
  13.             "priority": "high"
  14.         }, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, {
  15.             "team": "l",
  16.             "cycleTime": 3,
  17.             "effort": 2,
  18.             "count": 5,
  19.             "priority": "low"
  20.         }, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, {
  21.             "team": "l",
  22.             "cycleTime": 5,
  23.             "effort": 4,
  24.             "count": 3,
  25.             "priority": "high"
  26.         },
  27.         {"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, {
  28.             "team": "k",
  29.             "cycleTime": 3,
  30.             "effort": 5,
  31.             "count": 5,
  32.             "priority": "low"
  33.         }, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, {
  34.             "team": "k",
  35.             "cycleTime": 5,
  36.             "effort": 8,
  37.             "count": 3,
  38.             "priority": "high"
  39.         }];
  40. var chart = new tauCharts.Chart({
  41.             data: defData,
  42.             type: 'horizontalBar',           
  43.             x: 'effort',
  44.             y: 'team',
  45.             color:'priority'
  46.         });
  47. chart.renderTo('#bar');
复制代码

Recharts
ReCharts 是一个使用 React 构建的，基于 D3 的图表库。
使用 ReCharts，用户可以在 React Web 应用程序中无缝地编写图表。
Recharts 非常轻巧，并使用 SVG 元素来创建很奇特的图表。
使用 npm 安装 Recharts：
npm install recharts
Recharts 没有冗长的文档，它很直接。当你遇到困难时，使用 Recharts 可以很容易找到解决方案。
Recharts 创建自定义内容树图的代码示例：
  1. const {Treemap} = Recharts;

  3. const data = [
  4.           {
  5.             name: 'axis',
  6.             children: [
  7.               { name: 'Axes', size: 1302 },
  8.               { name: 'Axis', size: 24593 },
  9.               { name: 'AxisGridLine', size: 652 },
  10.               { name: 'AxisLabel', size: 636 },
  11.               { name: 'CartesianAxes', size: 6703 },
  12.             ],
  13.           },
  14.           {
  15.             name: 'controls',
  16.             children: [
  17.               { name: 'AnchorControl', size: 2138 },
  18.               { name: 'ClickControl', size: 3824 },
  19.               { name: 'Control', size: 1353 },
  20.               { name: 'ControlList', size: 4665 },
  21.               { name: 'DragControl', size: 2649 },
  22.               { name: 'ExpandControl', size: 2832 },
  23.               { name: 'HoverControl', size: 4896 },
  24.               { name: 'IControl', size: 763 },
  25.               { name: 'PanZoomControl', size: 5222 },
  26.               { name: 'SelectionControl', size: 7862 },
  27.               { name: 'TooltipControl', size: 8435 },
  28.             ],
  29.           },
  30.           {
  31.             name: 'data',
  32.             children: [
  33.               { name: 'Data', size: 20544 },
  34.               { name: 'DataList', size: 19788 },
  35.               { name: 'DataSprite', size: 10349 },
  36.               { name: 'EdgeSprite', size: 3301 },
  37.               { name: 'NodeSprite', size: 19382 },
  38.               {
  39.                 name: 'render',
  40.                 children: [
  41.                   { name: 'ArrowType', size: 698 },
  42.                   { name: 'EdgeRenderer', size: 5569 },
  43.                   { name: 'IRenderer', size: 353 },
  44.                   { name: 'ShapeRenderer', size: 2247 },
  45.                 ],
  46.               },
  47.               { name: 'ScaleBinding', size: 11275 },
  48.               { name: 'Tree', size: 7147 },
  49.               { name: 'TreeBuilder', size: 9930 },
  50.             ],
  51.           },
  52.               {
  53.                 name: 'layout',
  54.                 children: [
  55.                   { name: 'AxisLayout', size: 6725 },
  56.                   { name: 'BundledEdgeRouter', size: 3727 },
  57.                   { name: 'CircleLayout', size: 9317 },
  58.                   { name: 'CirclePackingLayout', size: 12003 },
  59.                   { name: 'DendrogramLayout', size: 4853 },
  60.                   { name: 'ForceDirectedLayout', size: 8411 },
  61.                   { name: 'IcicleTreeLayout', size: 4864 },
  62.                   { name: 'IndentedTreeLayout', size: 3174 },
  63.                   { name: 'Layout', size: 7881 },
  64.                   { name: 'NodeLinkTreeLayout', size: 12870 },
  65.                   { name: 'PieLayout', size: 2728 },
  66.                   { name: 'RadialTreeLayout', size: 12348 },
  67.                   { name: 'RandomLayout', size: 870 },
  68.                   { name: 'StackedAreaLayout', size: 9121 },
  69.                   { name: 'TreeMapLayout', size: 9191 },
  70.                 ],
  71.               },
  72.               { name: 'Operator', size: 2490 },
  73.               { name: 'OperatorList', size: 5248 },
  74.               { name: 'OperatorSequence', size: 4190 },
  75.               { name: 'OperatorSwitch', size: 2581 },
  76.               { name: 'SortOperator', size: 2023 },
  77.             ],
  78.           }
  79.         ];
  80. const COLORS = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D'];
  81. const CustomizedContent = React.createClass({
  82.   render() {
  83.     const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;
  84.     return (
  85.       <g>
  86.         <rect
  87.           x={x}
  88.           y={y}
  89.           width={width}
  90.           height={height}
  91.           style={{
  92.             fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : 'none',
  93.             stroke: '#fff',
  94.             strokeWidth: 2 / (depth + 1e-10),
  95.             strokeOpacity: 1 / (depth + 1e-10),
  96.           }}
  97.         />
  98.         {
  99.           depth === 1 ?
  100.           <text
  101.             x={x + width / 2}
  102.             y={y + height / 2 + 7}
  103.             textAnchor="middle"
  104.             fill="#fff"
  105.             fontSize={14}
  106.           >
  107.             {name}
  108.           </text>
  109.           : null
  110.         }
  111.         {
  112.           depth === 1 ?
  113.           <text
  114.             x={x + 4}
  115.             y={y + 18}
  116.             fill="#fff"
  117.             fontSize={16}
  118.             fillOpacity={0.9}
  119.           >
  120.             {index + 1}
  121.           </text>
  122.           : null
  123.         }
  124.       </g>
  125.     );
  126.   }
  127. });

  129. const SimpleTreemap = React.createClass({
  130.     render () {
  131.       return (
  132.         <Treemap
  133.           width={400}
  134.         height={200}
  135.         data={data}
  136.         dataKey="size"
  137.         ratio={4/3}
  138.         stroke="#fff"
  139.         fill="#8884d8"
  140.         content={<CustomizedContent colors={COLORS}/>}
  141.       />
  142.     );
  143.   }
  144. })

  146. ReactDOM.render(
  147.   <SimpleTreemap />,
  148.   document.getElementById('container')
  149. );
复制代码

Flot
目前，jQuery 已经成为 Web 开发人员非常重要的工具。有了 Flot.js，前端设计也变得更加容易。
Flot.js 是 JavaScript 库中较为古老的图表库之一。尽管如此，Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能。
Flot.js 有一个很完善的文档。当用户遇到困难时，可以很容易地找到解决办法。Flot.js 也支持旧版本的浏览器。
可以选择不使用 npm 来安装 Flot.js，而是在 HTML5 中包含 jQuery 和 JavaScript 文件。
Flot.js 的基本用法代码示例：
  1. $(function () {
  2.     var d1 = [];
  3.     for (var i = 0; i < 14; i += 0.5)
  4.         d1.push([i, Math.sin(i)]);

  6.     var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

  8.     // a null signifies separate line segments
  9.     var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
  10.    
  11.     $.plot($("#placeholder"), [ d1, d2, d3 ]);
  12. });
复制代码


JavaScript 开发工具推荐
SpreadJS纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能，适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

总结
以上介绍的 JavaScript 库都是高质量的图表库。但是在学习这些库的过程中，可能会因为学习曲线陡峭或是缺乏学习资料而遇到困难，一种很好的方案是将这些库结合起来使用。最后也欢迎大家补充更多的 JavaScript 图表库。
转载请注明出自：葡萄城控件

关于葡萄城
葡萄城成立于1980年，是全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。葡萄城于1988年在中国设立研发中心，在全球化产品的研发过程中，不断适应中国市场的本地需求，并为软件企业和各行业的信息化提供优秀的软件工具和咨询服务。

   
关于葡萄城：全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。

2 个回复

倒序浏览
求知者
初级会员   /  发表于：2018-11-30 10:14:23
沙发
我来暖暖贴
回复 使用道具 举报
JeffryLI
葡萄城公司职员   /  发表于：2018-12-4 09:05:47
板凳
有什么需要了解，可以随时和我们交谈
请点击评分，对我5分评价，谢谢！

葡萄城控件服务团队
官方网站: https://www.grapecity.com.cn/developer
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部