Open Macxx-could opened 1 year ago
Based on the demo code on the official website, I gradually realized my own needs. I observed that the problem of popping up the repair box appeared after that step of operation, and then located the problem.
⭐Result: The export is normal, the opening is normal, and the repair box does not pop up.
Replace the chart data in the demo code with the chart data obtained from the backend.
⭐Result: The export is normal, the opening is normal, and the repair box does not pop up
This step ruled out the problem of the data format. I began to guess whether it was a problem with the configuration item, so I started to check the configuration item.
Since my chart doesn't need to display the y-axis on both sides, I changed this configuration to the following:
// before
valAxes: [
{
showValAxisTitle: true,
valAxisTitle: "Cars Produced (m)",
valAxisMaxVal: 10,
valAxisTitleColor: "1982c4",
valAxisLabelColor: "1982c4",
},
{
showValAxisTitle: true,
valAxisTitle: "Global Market Share (%)",
valAxisMaxVal: 10,
valAxisTitleColor: "F38940",
valAxisLabelColor: "F38940",
valGridLine: { style: "none" },
},
],
// after
const valAxesItem = {
showValAxisTitle: false,
valAxisHidden: true,
valAxisLineShow: false,
valGridLine: { style: 'none' }
}
valAxes: [valAxesItem, valAxesItem]
⭐Result: The export is normal, the opening is normal, and the repair box does not pop up
Because my chart needs to display the data label of each data point, I made the following configuration:
const comboProps = {
chartArea: { fill: { color: "FFFFFF" } },
barDir: "col",
// barGrouping: "stacked", // delete this line
// 👇
showValue: true,
showLabel: true,
dataLabelPosition: 't',
dataLabelFormatCode: '0.0"%"',
dataLabelFontFace: "微软雅黑",
dataLabelFontSize: 8,
// 👆
catAxisLabelColor: "494949",
// ...more properties
}
⚠Result: The export is normal, and the pop-up repair box is opened.
Then I will add these lines of code and comment them line by line:
Comment out dataLabelFontSize
: still popup
Continue to comment out dataLabelFontFace
: still pop-up window
Continue to comment out dataLabelFontFace
: still pop-up window
Continue to comment out dataLabelFormatCode
: still pop-up window
⚠Continue to comment out dataLabelPosition
: the pop-up window disappears and opens normally
⚠Comment out the dataLabelPosition
line separately, and uncomment other attributes: the export is normal, the opening is normal, no pop-up window
So I came to the source code file pptgenjs/dist/pptxgenjs.es.js
to search for dataLabelPosition
, and came to the 1815th line of code in the file, and checked the instructions in the REFERENCE URL left in the code
https://docs.microsoft.com/en-us/openspecs/office_standards/ms-oi29500/e2b1697c-7adc-463d-9081-3daef72f656f?redirectedfrom=MSDN
learned that
The legal value of dataLabelPosition
of the histogram of barGrouping=clustered
is one of InsideBase, InsideEnd, OutsideEnd, Center
, the author of pptgenjs has processed this value, the code is as follows:
if (options.dataLabelPosition) {
// ...
if (options._type === CHART_TYPE.BUBBLE || options._type === CHART_TYPE.BUBBLE3D || options._type === CHART_TYPE.LINE || options._type === CHART_TYPE.SCATTER) {
if (!['b', 'ctr', 'l', 'r', 't'].includes(options.dataLabelPosition))
delete options.dataLabelPosition;
}
if (options._type === CHART_TYPE.BAR) {
if (!['stacked', 'percentStacked'].includes(options.barGrouping || '')) {
if (!['ctr', 'inBase', 'inEnd'].includes(options.dataLabelPosition))
delete options.dataLabelPosition;
}
if (!['clustered'].includes(options.barGrouping || '')) {
if (!['ctr', 'inBase', 'inEnd', 'outEnd'].includes(options.dataLabelPosition))
delete options.dataLabelPosition;
}
}
}
It can be seen that the author hopes that when the value of dataLabelPosition
is not the legal value of dataLabelPosition
for a certain type of chart, clear dataLabelPosition
and use the default value of dataLabelPosition
.
However, through console.log('options._type:', options._type, CHART_TYPE)
, I found that when we use a composite chart, the value of options._type
is an array, and CHART_TYPE.XX The value of
is a string, therefore, in the composite chart, the above piece of code cannot clear the illegal value of dataLabelPosition
for certain types of charts.
For further verification, add console.log
statements in these places of the code
Then execute the operation of generating PPT, and the printed results displayed in the console are as follows
It can be seen that the logic of clearing the value of dataLabelPosition
that is not legal is indeed not entered.
So I guess, is it because the value of dataLabelPosition
of the histogram is illegal, which caused the repair window to pop up when opening the PPT file? After all, there is a problem with the content displayed in the pop-up window. Isn’t it a problem to use an illegal value?
At first I thought it was a bug, but then I ran to read the official documentation, thought about it carefully, and found that the documentation divides the properties of the chart into
At first, I didn’t think there was any problem with writing the document like this. Now, combined with the above situation, I think the meaning of the document is to tell us that dataLabelPosition
should not be placed in general
, but should be placed in the separate options
of the chart .
// comboTypes
{
type: ppt.charts.BAR,
data: [{
name: config.barName,
labels: config.labels,
values: config.barValues,
}],
options: { chartColors: [config.barColor], barGapWidthPct: 250, dataLabelPosition: 'outEnd', },
},
Sure enough, I put it here, it exported normally, and no repair window popped up.
This property will also cause the repair window to pop up, and strangely, the repair window will only pop up when the value of this property is 1.
But in the documentation it shows that the value of this property can be 1-256
Even if I checked the source code, I didn't understand why, so I could only wait for the author's reply.
The emergence of this problem is the result of the following points:
dataLabelPosition
has different valid values that can be used in different charts, but there is no explanation in the document, but all the optional values of this attribute are placed. listed together.options.dataLabelPosition
in the code.demo code path:demos/modules/demo_chart.mjs line:1761-1823
My English is not very good. I translated the above article line by line through Google. The following is my original text. I am sorry for the inconvenience caused.
我以官网demo代码为基础,逐步逐步实现自己的需求,观察是在那一步操作之后出现弹出修复框这个问题,进而定位问题所在。
⭐结果:导出正常,打开正常,未弹出修复框。
用后端获取到的图表数据替换掉demo代码中的图表数据。
⭐结果:导出正常,打开正常,未弹出修复框
这一步排除了数据格式的问题,我开始猜测是否配置项的问题,于是开始排查配置项
因为我的图表不需要显示两边的y轴,所以我把这个配置改为下面这样:
// before
valAxes: [
{
showValAxisTitle: true,
valAxisTitle: "Cars Produced (m)",
valAxisMaxVal: 10,
valAxisTitleColor: "1982c4",
valAxisLabelColor: "1982c4",
},
{
showValAxisTitle: true,
valAxisTitle: "Global Market Share (%)",
valAxisMaxVal: 10,
valAxisTitleColor: "F38940",
valAxisLabelColor: "F38940",
valGridLine: { style: "none" },
},
],
// after
const valAxesItem = {
showValAxisTitle: false,
valAxisHidden: true,
valAxisLineShow: false,
valGridLine: { style: 'none' }
}
valAxes: [valAxesItem, valAxesItem]
⭐结果:导出正常,打开正常,未弹出修复框
因为我的图表需要把每个数据点的数据标签显示出来,因此我做了如下配置:
const comboProps = {
chartArea: { fill: { color: "FFFFFF" } },
barDir: "col",
// barGrouping: "stacked", // delete this line
// 👇
showValue: true,
showLabel: true,
dataLabelPosition: 't',
dataLabelFormatCode: '0.0"%"',
dataLabelFontFace: "微软雅黑",
dataLabelFontSize: 8,
// 👆
catAxisLabelColor: "494949",
// ...more properties
}
⚠结果:导出正常,打开弹出修复框。
然后我将新增的这几行代码,逐行注释:
注释掉 dataLabelFontSize
: 依旧弹窗
继续注释掉 dataLabelFontFace
:依旧弹窗
继续注释掉 dataLabelFontFace
:依旧弹窗
继续注释掉 dataLabelFormatCode
:依旧弹窗
⚠继续注释掉 dataLabelPosition
:弹窗消失,且打开正常
⚠单独注释掉 dataLabelPosition
这一行,并且取消掉其他属性的注释 :导出正常,打开正常,无弹窗
于是我来到源码文件 pptgenjs/dist/pptxgenjs.es.js
中搜索 dataLabelPosition
,来到了文件的第1815行代码处,通过查阅代码中留下的 REFERENCE 网址中的说明
https://docs.microsoft.com/en-us/openspecs/office_standards/ms-oi29500/e2b1697c-7adc-463d-9081-3daef72f656f?redirectedfrom=MSDN
得知
barGrouping=clustered
的柱状图的 dataLabelPosition
的合法值为 InsideBase, InsideEnd, OutsideEnd, Center
其中一个,pptgenjs的作者有对这个值进行处理,代码如下:
if (options.dataLabelPosition) {
// ...
if (options._type === CHART_TYPE.BUBBLE || options._type === CHART_TYPE.BUBBLE3D || options._type === CHART_TYPE.LINE || options._type === CHART_TYPE.SCATTER) {
if (!['b', 'ctr', 'l', 'r', 't'].includes(options.dataLabelPosition))
delete options.dataLabelPosition;
}
if (options._type === CHART_TYPE.BAR) {
if (!['stacked', 'percentStacked'].includes(options.barGrouping || '')) {
if (!['ctr', 'inBase', 'inEnd'].includes(options.dataLabelPosition))
delete options.dataLabelPosition;
}
if (!['clustered'].includes(options.barGrouping || '')) {
if (!['ctr', 'inBase', 'inEnd', 'outEnd'].includes(options.dataLabelPosition))
delete options.dataLabelPosition;
}
}
}
可以看得出来,作者希望:当 dataLabelPosition
的值不是某一类图表的 dataLabelPosition
的合法值的时候,就清除掉 dataLabelPosition
,进而采用 dataLabelPosition
的默认值。
但是,我通过 console.log('options._type:', options._type, CHART_TYPE)
,发现,当我们使用复合图表的时候,options._type
的值是一个数组,而 CHART_TYPE.XX
的值是一个字符串,因此,在复合图表中,上面这一段代码并不能清除掉某类图表不合法的 dataLabelPosition
的值。
为了更进一步的验证,在代码的这几个地方加上 console.log
语句
然后执行生成PPT操作,在控制台中的显示的打印结果如下
可以看出,确实没有进入到清除不合法的 dataLabelPosition
的值的逻辑中。
所以我猜测,是否因为柱状图的 dataLabelPosition
的值不合法,才导致了打开PPT文件的时候弹出了修复窗呢?毕竟,弹出窗中显示的是内容有问题,用了不合法的值不就是问题吗?
本来我觉得这是一个bug,但是后来我又跑去看了一下官方的使用文档,仔细想了一下,发现文档将图表的属性分为
一开始没觉得文档这样写有什么问题,现在结合上面的情况,我觉得文档这样写的意思是告诉我们 dataLabelPosition
不要放在 general
中,而是应该放在图表单独的 options
中。
// comboTypes
{
type: ppt.charts.BAR,
data: [{
name: config.barName,
labels: config.labels,
values: config.barValues,
}],
options: { chartColors: [config.barColor], barGapWidthPct: 250, dataLabelPosition: 'outEnd', },
},
果然,我放在这里,它导出正常,并且没有弹出修复窗口。
这个属性也会导致弹出修复窗,而且奇怪的是,当这个属性的值为1的时候,才会弹出修复窗。
但是在文档中显示,该属性的值可以是1-256
这个即使查看了源码,我也没想明白为什么,只能等待作者回复了。
这个问题的出现,是以下这几点的作用结果
dataLabelPosition
的值在不同图表中可以使用的有效值是不一样的,但是文档中并没有说明,而是把这个属性的所有可选值都放在一起列了出来。options.dataLabelPosition
的非合法值的处理逻辑存在问题。
Issue Category
Product Versions
Desired Behavior
Observed Behavior
Pop-up repair when opening PPT
Click Repair, enter the PPT, the page with the chart becomes a blank page
If the code related to the chart is commented, this problem will not occur
Note that not all composite charts will have this problem, and composite charts on some pages can be displayed normally
Steps to Reproduce