จัดการป้ายข้อมูลแผนภูมิในงานนำเสนอโดยใช้ JavaScript
บทนำ
ป้ายข้อมูลแสดงข้อมูลเกี่ยวกับชุดข้อมูลของแผนภูมิและจุดข้อมูลแต่ละจุด ช่วยให้ผู้อ่านสามารถระบุค่าและเข้าใจแผนภูมิได้ บทความนี้อธิบายวิธีการจัดรูปแบบค่า การแสดงเปอร์เซ็นต์ การอ่านข้อความป้าย การควบคุมป้ายที่เกินค่าสูงสุดของแกน การปรับระยะห่างของป้ายแกนประเภท และการกำหนดตำแหน่งป้ายของแผนภูมิวงกลม
กำหนดความแม่นยำของข้อมูลในป้ายข้อมูลแผนภูมิ
ใช้ setNumberFormatOfValues เพื่อจัดรูปแบบค่าของชุดข้อมูล ตัวอย่างนี้สร้างแผนภูมิเส้นพร้อมข้อมูลเริ่มต้น แสดงตารางข้อมูลของมัน และเปิดใช้งานป้ายค่าสำหรับชุดข้อมูลแรก รูปแบบ #,##0.00 จะใส่คั่นหลักพันและแสดงตำแหน่งทศนิยมสองตำแหน่งโดยไม่เปลี่ยนค่าที่อยู่เบื้องหลัง
const aspose = { slides: require("aspose.slides.via.java") };
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 50, 50, 450, 300);
chart.setDataTable(true);
const series = chart.getChartData().getSeries().get_Item(0);
series.setNumberFormatOfValues("#,##0.00");
series.getLabels().getDefaultDataLabelFormat().setShowValue(true);
presentation.save("PrecisionOfDatalabels_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
แสดงเปอร์เซ็นต์เป็นป้าย
สำหรับแผนภูมิคอลัมน์แบบซ้อนกัน คำนวณค่าตัวแต่ละค่าเป็นเปอร์เซ็นต์ของผลรวมในหมวดหมู่ของมันและกำหนดข้อความไปยังเฟรมข้อความที่ได้จาก getTextFrameForOverriding. ตัวอย่างนี้ใช้ข้อมูลแผนภูมิเบื้องต้นและแสดงเปอร์เซ็นต์ด้วยตำแหน่งทศนิยมสองตำแหน่งในฟอนต์ขนาด 8 จุด หมวดหมู่ที่ผลรวมเป็นศูนย์จะถูกข้ามเพื่อหลีกเลี่ยงการหารด้วยศูนย์ คำนวณข้อความป้ายแบบกำหนดเองใหม่หากข้อมูลแผนภูมิเปลี่ยนแปลง
const aspose = { slides: require("aspose.slides.via.java") };
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.StackedColumn, 20, 20, 400, 400);
const categoryTotals = new Array(chart.getChartData().getCategories().size()).fill(0);
for (let k = 0; k < chart.getChartData().getCategories().size(); k++) {
for (let i = 0; i < chart.getChartData().getSeries().size(); i++) {
const series = chart.getChartData().getSeries().get_Item(i);
const pointValue = series.getDataPoints().get_Item(k).getValue().getData();
categoryTotals[k] += Number(pointValue);
}
}
for (let x = 0; x < chart.getChartData().getSeries().size(); x++) {
const series = chart.getChartData().getSeries().get_Item(x);
series.getLabels().getDefaultDataLabelFormat().setShowLegendKey(false);
for (let j = 0; j < series.getDataPoints().size(); j++) {
const label = series.getDataPoints().get_Item(j).getLabel();
if (categoryTotals[j] == 0) {
continue;
}
const pointValue = series.getDataPoints().get_Item(j).getValue().getData();
const dataPointPercent = (Number(pointValue) / categoryTotals[j]) * 100;
const portion = new aspose.slides.Portion();
portion.setText(dataPointPercent.toFixed(2) + " %");
portion.getPortionFormat().setFontHeight(8);
label.getTextFrameForOverriding().setText("");
const paragraph = label.getTextFrameForOverriding().getParagraphs().get_Item(0);
paragraph.getPortions().add(portion);
label.getDataLabelFormat().setShowValue(true);
label.getDataLabelFormat().setShowSeriesName(false);
label.getDataLabelFormat().setShowPercentage(false);
label.getDataLabelFormat().setShowLegendKey(false);
label.getDataLabelFormat().setShowCategoryName(false);
label.getDataLabelFormat().setShowBubbleSize(false);
}
}
presentation.save("DisplayPercentageAsLabels_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
ตั้งสัญลักษณ์เปอร์เซ็นต์กับป้ายข้อมูลแผนภูมิ
เมื่อค่าถูกจัดเก็บเป็นเศษส่วน ใช้ setNumberFormat เพื่อแสดงเปอร์เซ็นต์ ส่งค่า false ไปยัง setNumberFormatLinkedToSource เพื่อให้รูปแบบป้ายทำงานแยกจากเซลล์ต้นฉบับ
ตัวอย่างนี้สร้างแผนภูมิคอลัมน์แบบซ้อน 100% พร้อมชุดสีแดงและสีน้ำเงินในสี่หมวดหมู่ แต่ละคู่ค่ารวมกันเท่ากับ 1 รูปแบบป้าย 0.0% จะแสดง 0.30 เป็น 30.0% ในขณะที่แกนแนวตั้งใช้ตำแหน่งทศนิยมสองตำแหน่ง ทั้งสองชุดใช้ข้อความป้ายสีขาวขนาด 10 จุด
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.PercentsStackedColumn, 20, 20, 500, 400);
chart.getAxes().getVerticalAxis().setNumberFormatLinkedToSource(false);
chart.getAxes().getVerticalAxis().setNumberFormat("0.00%");
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
const workbook = chart.getChartData().getChartDataWorkbook();
const worksheetIndex = 0;
for (let i = 0; i < 4; i++) {
const categoryCell = workbook.getCell(worksheetIndex, i + 1, 0, "Category " + (i + 1));
chart.getChartData().getCategories().add(categoryCell);
}
const seriesNames = ["Reds", "Blues"];
const white = java.getStaticFieldValue("java.awt.Color", "WHITE");
const seriesColors = [java.getStaticFieldValue("java.awt.Color", "RED"), java.getStaticFieldValue("java.awt.Color", "BLUE")];
const values = [[0.30, 0.50, 0.80, 0.65], [0.70, 0.50, 0.20, 0.35]];
for (let i = 0; i < seriesNames.length; i++) {
const seriesCell = workbook.getCell(worksheetIndex, 0, i + 1, seriesNames[i]);
const series = chart.getChartData().getSeries().add(seriesCell, chart.getType());
for (let j = 0; j < 4; j++) {
const valueCell = workbook.getCell(worksheetIndex, j + 1, i + 1, values[i][j]);
series.getDataPoints().addDataPointForBarSeries(valueCell);
}
series.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
series.getFormat().getFill().getSolidFillColor().setColor(seriesColors[i]);
const labelFormat = series.getLabels().getDefaultDataLabelFormat();
labelFormat.setShowValue(true);
labelFormat.setNumberFormatLinkedToSource(false);
labelFormat.setNumberFormat("0.0%");
labelFormat.getTextFormat().getPortionFormat().setFontHeight(10);
labelFormat.getTextFormat().getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
labelFormat.getTextFormat().getPortionFormat().getFillFormat().getSolidFillColor().setColor(white);
}
presentation.save("SetDataLabelsPercentageSign_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
อ่านข้อความจริงของป้ายข้อมูล
ใช้ getActualLabelText เพื่อดึงข้อความที่สร้างโดยการตั้งค่าของป้ายข้อมูล ซึ่งเป็นประโยชน์เมื่อดึงป้ายเพื่อสร้างรายงาน ค้นหาเนื้อหาในงานนำเสนอ หรือทำการตรวจสอบแผนภูมิที่สร้างขึ้น ในตัวอย่างด้านล่าง รูปแบบป้ายข้อมูลเริ่มต้น (data label format) จะรวมชื่อหมวดหมู่ ชื่อชุดข้อมูล และค่าไว้ด้วยกัน จุดหนึ่งจัดรูปแบบค่าของมันเป็นเปอร์เซ็นต์ และอีกจุดหนึ่งใช้ข้อความกำหนดเองจาก getTextFrameForOverriding
const aspose = { slides: require("aspose.slides.via.java") };
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 300);
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
const workbook = chart.getChartData().getChartDataWorkbook();
const firstCategoryCell = workbook.getCell(0, 1, 0, "Q1");
chart.getChartData().getCategories().add(firstCategoryCell);
const secondCategoryCell = workbook.getCell(0, 2, 0, "Q2");
chart.getChartData().getCategories().add(secondCategoryCell);
const northSeriesCell = workbook.getCell(0, 0, 1, "North");
const north = chart.getChartData().getSeries().add(northSeriesCell, chart.getType());
const northFirstValueCell = workbook.getCell(0, 1, 1, 0.25);
north.getDataPoints().addDataPointForBarSeries(northFirstValueCell);
const northSecondValueCell = workbook.getCell(0, 2, 1, 0.75);
north.getDataPoints().addDataPointForBarSeries(northSecondValueCell);
const southSeriesCell = workbook.getCell(0, 0, 2, "South");
const south = chart.getChartData().getSeries().add(southSeriesCell, chart.getType());
const southFirstValueCell = workbook.getCell(0, 1, 2, 0.40);
south.getDataPoints().addDataPointForBarSeries(southFirstValueCell);
const southSecondValueCell = workbook.getCell(0, 2, 2, 0.60);
south.getDataPoints().addDataPointForBarSeries(southSecondValueCell);
for (let i = 0; i < chart.getChartData().getSeries().size(); i++) {
const series = chart.getChartData().getSeries().get_Item(i);
const format = series.getLabels().getDefaultDataLabelFormat();
format.setShowCategoryName(true);
format.setShowSeriesName(true);
format.setShowValue(true);
}
north.getLabels().get_Item(1).getDataLabelFormat().setNumberFormatLinkedToSource(false);
north.getLabels().get_Item(1).getDataLabelFormat().setNumberFormat("0%");
south.getLabels().get_Item(0).getTextFrameForOverriding().setText("Reviewed");
for (let i = 0; i < chart.getChartData().getSeries().size(); i++) {
const series = chart.getChartData().getSeries().get_Item(i);
for (let j = 0; j < series.getDataPoints().size(); j++) {
const point = series.getDataPoints().get_Item(j);
const label = point.getLabel();
if (!label.isVisible()) {
continue;
}
console.log("Value: " + point.getValue().getData() + "; label: " + label.getActualLabelText());
}
}
} finally {
presentation.dispose();
}
จำนวนที่จัดเก็บในจุดข้อมูลยังคงเป็น 0.75 แม้ว่าป้ายของมันจะแสดง 75% พร้อมกับชื่อหมวดหมู่และชื่อชุดข้อมูล ข้อความกำหนดเองจะทับข้อความป้ายที่สร้างขึ้น getActualLabelText จะคืนสตริงป้ายผลลัพธ์ในทั้งสองกรณี ตรวจสอบ isVisible แยกต่างหากตามที่แสดงด้านบนเมื่อคุณต้องการดึงเฉพาะป้ายที่มองเห็นได้
ควบคุมป้ายข้อมูลที่เกินค่าสูงสุดของแกน
เมื่อคุณกำหนดช่วงแกนด้วยตนเอง จุดข้อมูลบางจุดอาจเกินค่าสูงสุด ใช้ setShowDataLabelsOverMaximum เพื่อควบคุมว่าจะแสดงป้ายข้อมูลของพวกมันหรือไม่ การตั้งค่านี้เปลี่ยนการมองเห็นของป้ายเท่านั้น ไม่ได้เปลี่ยนช่วงแกนหรือค่าข้อมูลพื้นฐาน
ตัวอย่างด้านล่างสร้างแผนภูมิคอลัมน์กลุ่ม 2 มิติที่มีค่า 60 และ 120 ส่งค่า false ไปยัง setAutomaticMaxValue และตั้งค่าสูงสุดเป็น 100 ด้วย setMaxValue บนแกนแนวตั้ง สไลด์แรกอนุญาตให้ป้ายอยู่เหนือค่าสูงสุด; สไลด์สำเนาใส่ค่า false เพื่อปิดการแสดง ทั้งสองสไลด์บันทึกเป็น DataLabelsOverMaximum.pptx
เปิดใช้งานป้ายค่าโดยใช้ setShowValue. การตั้งค่าที่ระดับแผนภูมิไม่ได้เปิดการแสดงค่าโดยอัตโนมัติหรือเขียนทับการแสดงค่าที่ปิดอยู่ในป้ายแต่ละอัน ตัวอย่างนี้เปิดค่าให้กับชุดข้อมูลทั้งหมดและใช้ setPosition เพื่อตำแหน่งป้ายที่ปลายนอกของแต่ละคอลัมน์
const aspose = { slides: require("aspose.slides.via.java") };
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 600, 400);
chart.setLegend(false);
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
const workbook = chart.getChartData().getChartDataWorkbook();
const firstCategory = workbook.getCell(0, 1, 0, "Within range");
const secondCategory = workbook.getCell(0, 2, 0, "Above maximum");
chart.getChartData().getCategories().add(firstCategory);
chart.getChartData().getCategories().add(secondCategory);
const seriesName = workbook.getCell(0, 0, 1, "Values");
const series = chart.getChartData().getSeries().add(seriesName, chart.getType());
const firstValue = workbook.getCell(0, 1, 1, 60);
const secondValue = workbook.getCell(0, 2, 1, 120);
series.getDataPoints().addDataPointForBarSeries(firstValue);
series.getDataPoints().addDataPointForBarSeries(secondValue);
series.getLabels().getDefaultDataLabelFormat().setShowValue(true);
series.getLabels().getDefaultDataLabelFormat().setPosition(aspose.slides.LegendDataLabelPosition.OutsideEnd);
chart.getAxes().getVerticalAxis().setAutomaticMaxValue(false);
chart.getAxes().getVerticalAxis().setMaxValue(100);
chart.setShowDataLabelsOverMaximum(true);
const secondSlide = presentation.getSlides().addClone(slide);
const secondChart = secondSlide.getShapes().get_Item(0);
secondChart.setShowDataLabelsOverMaximum(false);
presentation.save("DataLabelsOverMaximum.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
ตารางต่อไปแสดงสไลด์ที่บันทึกโดย Microsoft PowerPoint ด้วย true ป้าย 120 จะมองเห็นได้ที่ขอบบนสุด; ด้วย false ป้ายจะถูกซ่อน ป้าย 60 ยังคงมองเห็นได้ แกนสูงสุดคงที่ที่ 100 และจุดข้อมูลที่สองยังคงเป็น 120 ในทั้งสองกรณี
| setShowDataLabelsOverMaximum(true) | setShowDataLabelsOverMaximum(false) |
|---|---|
 |
 |
Chart Type
ตัวอย่างนี้ใช้แผนภูมิคอลัมน์ 2 มิติพร้อมแกนค่า แผนภูมิที่ไม่มีแกนค่า เช่น แผนภูมิเวลีย์และโดนัท จะไม่มีค่าสูงสุดของแกนที่สามารถจำกัดได้ในลักษณะนี้ตั้งระยะห่างของป้ายจากแกน
ใช้ setLabelOffset เพื่อควบคุมระยะห่างระหว่างป้ายแกนประเภทและแกน ค่าเป็นเปอร์เซ็นต์ของขนาดฟอนต์สูงสุดของป้ายแกน ตัวอย่างนี้สร้างแผนภูมิคอลัมน์กลุ่มและตั้งค่า offset ของป้ายแกนแนวนอนเป็น 500 การตั้งค่านี้ส่งผลต่อป้ายแกนประเภทมากกว่าป้ายที่แนบกับจุดข้อมูลแต่ละจุด
const aspose = { slides: require("aspose.slides.via.java") };
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 300);
chart.getAxes().getHorizontalAxis().setLabelOffset(500);
presentation.save("SetCategoryAxisLabelDistance_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
ปรับตำแหน่งป้าย
บนแผนภูมิวงกลม ปรับตำแหน่งป้ายข้อมูลเพื่อเพิ่มระยะห่างและสร้างพื้นที่ให้กับเส้นเชื่อม
ตัวอย่างนี้แสดงค่าของจุดข้อมูลแรก วางป้ายออกนอกชิ้นส่วน และปรับ offset แนวนอนและแนวตั้งโดยใช้ setX และ setY. offset เหล่านี้เป็นอัตราส่วนของความกว้างและความสูงของแผนภูมิ ตามลำดับ
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.Pie, 50, 50, 200, 200);
const series = chart.getChartData().getSeries();
const label = series.get_Item(0).getLabels().get_Item(0);
label.getDataLabelFormat().setShowValue(true);
label.getDataLabelFormat().setPosition(aspose.slides.LegendDataLabelPosition.OutsideEnd);
label.setX(java.newFloat(0.71));
label.setY(java.newFloat(0.04));
presentation.save("presentation.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
คำถามที่พบบ่อย
ฉันจะป้องกันไม่ให้ป้ายข้อมูลซ้อนทับกันในแผนภูมิที่หนาแน่นได้อย่างไร?
รวมการวางป้ายอัตโนมัติ เส้นเชื่อม และการลดขนาดฟอนต์; หากจำเป็นให้ซ่อนบางฟิลด์ (เช่น หมวดหมู่) หรือแสดงป้ายเฉพาะค่าที่สุดยอดหรือจุดสำคัญ
ฉันจะปิดป้ายเฉพาะค่าศูนย์ ค่าลบ หรือค่าว่างได้อย่างไร?
กรองจุดข้อมูลก่อนเปิดใช้งานป้ายและปิดการแสดงสำหรับค่า 0, ค่าลบ หรือค่าที่หายไปตามกฎที่กำหนด
ฉันจะทำให้รูปแบบป้ายคงที่เมื่อนำออกเป็น PDF/รูปภาพได้อย่างไร?
กำหนดฟอนต์และขนาดฟอนต์อย่างชัดเจนและตรวจสอบว่าฟอนต์นั้นพร้อมใช้งานในสภาพแวดล้อมการเรนเดอร์เพื่อหลีกเลี่ยงการเปลี่ยนเป็นฟอนต์สำรอง