找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 求助中心 › 查看内容
发新帖

Mrluo

初级会员

23

主题

62

帖子

213

积分

初级会员

积分
213
最新发帖

[已处理] [16.1]透视表设置GC.Spread.Pivot.PivotTableFieldType.valueField的样式

Mrluo
初级会员   /  发表于：2023-12-5 18:08  /   查看：575  /  回复：2
1金币
本帖最后由 Mrluo 于 2023-12-6 10:03 编辑

透视表设置GC.Spread.Pivot.PivotTableFieldType.valueField的样式

想要设置这个值类型的几个列的数字格式是万为单位 ，按照 数据透视表字段标签格式 | 功能例子 | SpreadJS JavaScript 学习指南 (grapecity.com.cn) 这个例子做的设置，样例的代码如下 ：（怕链接发不了，就贴出来官方给的样例代码）
  1. <template>
  2.   <div class="sample-tutorial">
  3.     <gc-spread-sheets
  4.       class="sample-spreadsheets"
  5.       @workbookInitialized="initSpread"
  6.     >
  7.     </gc-spread-sheets>
  8.     <div class="options-container">
  9.       <div>Field Name:</div>
  10.       <select
  11.         name="fieldName"
  12.         id="fieldName"
  13.         class="field-name"
  14.         v-model="fieldName"
  15.         @change="changeFormatter"
  16.       >
  17.         <option value="Salesperson" selected>Salesperson</option>
  18.         <option value="Cars">Cars</option>
  19.         <option value="Date">Date</option>
  20.         <option value="Quantity">Quantity</option>
  21.       </select>
  22.       <div>Formatter:</div>
  23.       <input
  24.         type="text"
  25.         class="label-filter-input filter-input"
  26.         id="formatter"
  27.         v-model="formatter"
  28.       />
  29.       <input
  30.         type="button"
  31.         class="format-button"
  32.         value="Set"
  33.         id="set"
  34.         @click="setFormatter"
  35.       />
  36.       <input
  37.         type="button"
  38.         class="format-button"
  39.         value="Reset"
  40.         id="reset"
  41.         @click="resetFormatter"
  42.       />
  43.     </div>
  44.   </div>
  45. </template>

  47. <script>
  48. import Vue from "vue";
  49. import "@grapecity/spread-sheets-vue";
  50. import GC from "@grapecity/spread-sheets";
  51. import "@grapecity/spread-sheets-shapes";
  52. import "@grapecity/spread-sheets-pivot-addon";
  53. import '@grapecity/spread-sheets-resources-zh';
  54. GC.Spread.Common.CultureManager.culture("zh-cn");
  55. import "./styles.css";

  57. let App = Vue.extend({
  58.   name: "app",
  59.   data: function () {
  60.     return {
  61.       spread: null,
  62.       pivotTable: null,
  63.       fieldName: "Salesperson",
  64.       formatter: "",
  65.     };
  66.   },
  67.   methods: {
  68.     initSpread: function (spread) {
  69.       this.spread = spread;
  70.       spread.suspendPaint();
  71.       spread.setSheetCount(2);
  72.       let sheet1 = spread.getSheet(0);
  73.       let sheet2 = spread.getSheet(1);
  74.       let tableName = this.getSource(sheet2, pivotSales);
  75.       let pivotTable = this.addPivotTable(sheet1, tableName);
  76.       this.pivotTable = pivotTable;
  77.       spread.resumePaint();
  78.     },

  80.     getSource: function (sheet, tableSource) {
  81.       sheet.name("DataSource");
  82.       sheet.setRowCount(117);
  83.       sheet.setColumnWidth(0, 120);
  84.       sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
  85.       sheet.getRange(-1, 4, 0, 2).formatter("$ #,##0");
  86.       let table = sheet.tables.add("table", 0, 0, 117, 6);
  87.       for (let i = 2; i <= 117; i++) {
  88.         sheet.setFormula(i - 1, 5, "=D" + i + "*E" + i);
  89.       }
  90.       table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
  91.       sheet.setArray(0, 0, tableSource);
  92.       return table.name();
  93.     },

  95.     addPivotTable: function (sheet, source) {
  96.       sheet.suspendPaint();
  97.       sheet.name("PivotTable");
  98.       sheet.setRowCount(10000);
  99.       let pivotTable = sheet.pivotTables.add(
  100.         "PivotTable",
  101.         source,
  102.         1,
  103.         1,
  104.         GC.Spread.Pivot.PivotTableLayoutType.outline,
  105.         GC.Spread.Pivot.PivotTableThemes.light8
  106.       );
  107.       pivotTable.suspendLayout();
  108.       pivotTable.add(
  109.         "salesperson",
  110.         "Salesperson",
  111.         GC.Spread.Pivot.PivotTableFieldType.rowField
  112.       );
  113.       pivotTable.add(
  114.         "car",
  115.         "Cars",
  116.         GC.Spread.Pivot.PivotTableFieldType.rowField
  117.       );
  118.       pivotTable.add(
  119.         "date",
  120.         "Date",
  121.         GC.Spread.Pivot.PivotTableFieldType.columnField
  122.       );
  123.       let groupInfo = {
  124.         originFieldName: "date",
  125.         dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }],
  126.       };
  127.       pivotTable.group(groupInfo);
  128.       pivotTable.add(
  129.         "quantity",
  130.         "Quantity",
  131.         GC.Spread.Pivot.PivotTableFieldType.valueField,
  132.         GC.Pivot.SubtotalType.sum
  133.       );
  134.       let carsStyle = new GC.Spread.Sheets.Style();
  135.       carsStyle.formatter = "[red]@";
  136.       let valueStyle = new GC.Spread.Sheets.Style();
  137.       valueStyle.formatter = "#0.00";
  138.       pivotTable.setStyle(this.initArea("Cars", pivotTable), carsStyle);
  139.       pivotTable.setStyle(this.initArea("Quantity", pivotTable), valueStyle);
  140.       pivotTable.resumeLayout();
  141.       sheet.resumePaint();
  142.       pivotTable.autoFitColumn();
  143.       return pivotTable;
  144.     },
  145.     initArea: function (fieldName, pt) {
  146.       let fieldArea = pt.getField(fieldName).pivotArea;
  147.       if (fieldArea === 1 || fieldArea === 2) {
  148.         return {
  149.           labelOnly: true,
  150.           references: [
  151.             {
  152.               fieldName,
  153.             },
  154.           ],
  155.         };
  156.       } else if (fieldArea === 3) {
复制代码




我的关键代码如下：
image.png626604919.png



image.png17643736.png


要怎么设置这个样式啊，头疼，样例中的说明有个参数
是这样的
image.png963503417.png
但是api文档中又是这样的
image.png703223571.png


我真的搞麻了





最佳答案

Ellia.Duan

查看完整内容

您好，您可以将您的代码中的Values改为值。如下图所示：

2 个回复

倒序浏览
最佳答案
最佳答案
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于：2023-12-5 18:08:28
来自 3#
您好，您可以将您的代码中的Values改为值。如下图所示：
image.png719538268.png
SpreadJS v17.0 预览版已经正式上线~~~
回复 使用道具 举报
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于：2023-12-6 10:01:53
2#
您好，您的问题已收到，我们将深入调研下此问题
SpreadJS v17.0 预览版已经正式上线~~~
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

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

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

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

Archiver| 手机版| 小黑屋|

返回顶部