使用 C++ 和 JavaScript 进行图表数据过滤的三种方法
Contents
[
Hide
]
1. 过滤以渲染图表的系列
在Excel中，我们可以过滤掉图表中的特定系列，导致这些被过滤的系列不会显示在图表中。 原始图表显示在图1中。然而，当我们过滤掉Testseries2和Testseries4时，图表将会如图2所示。
在Excel中，我们可以筛选出特定系列，从而在图表中隐藏那些筛选的系列。原始图表如图1所示。当我们筛选掉Testseries2和Testseries4后，图表将如图2所示。
在 C++ 中使用 Aspose.Cells for JavaScript，我们可以执行类似操作。对于像这个样本([seriesFiltered.xlsx])文件，如果我们想过滤掉 Testseries2 和 Testseries4，可以执行以下代码。同时，我们将维护两个列表：一个(Chart.nSeries) 用于存储所有选中的系列。
示例代码
以下示例代码加载了示例Excel文件。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Series Filter Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiate workbook from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access first worksheet and chart
const worksheet = workbook.worksheets.get(0);
const chart = worksheet.charts.get("Chart 1");
// Get filtered series list and visible series list
const nSeriesFiltered = chart.filteredNSeries;
const nSeries = chart.nSeries;
// Initial counts
const initialFilteredCount = nSeriesFiltered.count;
const initialVisibleCount = nSeries.count;
console.log("Filtered Series count: " + initialFilteredCount);
console.log("Visible Series count: " + initialVisibleCount);
// Process from the end to the beginning - mark series as filtered
nSeries.get(1).isFiltered = true;
nSeries.get(0).isFiltered = true;
// Counts after filtering
const afterFilteredCount = nSeriesFiltered.count;
const afterVisibleCount = nSeries.count;
console.log("Filtered Series count: " + afterFilteredCount);
console.log("Visible Series count: " + afterVisibleCount);
// Save the modified workbook and provide download link
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'seriesFiltered-out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
// Re-open the saved workbook from the in-memory output to validate counts
const reopenedWorkbook = new Workbook(outputData);
const reopenedWorksheet = reopenedWorkbook.worksheets.get(0);
const reopenedChart = reopenedWorksheet.charts.get("Chart 1");
const reopenedFiltered = reopenedChart.filteredNSeries;
const reopenedVisible = reopenedChart.nSeries;
const reopenedFilteredCount = reopenedFiltered.count;
const reopenedVisibleCount = reopenedVisible.count;
console.log("Filtered Series count: " + reopenedFilteredCount);
console.log("Visible Series count: " + reopenedVisibleCount);
// Display results to user
document.getElementById('result').innerHTML =
`<p style="color: green;">Initial - Filtered Series count: ${initialFilteredCount}, Visible Series count: ${initialVisibleCount}</p>` +
`<p style="color: green;">After Marking - Filtered Series count: ${afterFilteredCount}, Visible Series count: ${afterVisibleCount}</p>` +
`<p style="color: green;">After Reopen - Filtered Series count: ${reopenedFilteredCount}, Visible Series count: ${reopenedVisibleCount}</p>`;
});
</script>
</html>
2. 过滤数据并使图表发生变化
筛选数据是处理大量图表数据的好方法。当你筛选数据时，图表也会相应变化。需要注意的是，要确保图表始终显示在屏幕上，筛选可能会隐藏行，而图表可能位于这些隐藏行中。
使用数据筛选器更改Excel中图表的步骤
- 点击数据范围内部。
- 单击数据选项卡，通过单击筛选器进行筛选。 您的标题行将有下拉箭头。
- 通过转到插入选项卡并选择列图表来创建图表。
- 现在使用数据中的下拉箭头筛选您的数据。 不要使用图表筛选器。
示例代码
以下示例代码展示了使用Aspose.Cells实现相同功能。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Autofilter and Chart Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<a id="imageDownloadLink" style="display: none; margin-left: 10px;">Download Chart Image</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
const downloadLink = document.getElementById('downloadLink');
const imageDownloadLink = document.getElementById('imageDownloadLink');
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
// Ensure Aspose.Cells is initialized
await AsposeCells.onReady();
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiate workbook from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access the worksheet named "Sheet1"
const sheet = workbook.worksheets.get("Sheet1");
// Add data into detail cells
sheet.cells.get(0, 0).putValue("Fruits Name");
sheet.cells.get(0, 1).putValue("Fruits Price");
sheet.cells.get(1, 0).putValue("Apples");
sheet.cells.get(2, 0).putValue("Bananas");
sheet.cells.get(3, 0).putValue("Grapes");
sheet.cells.get(4, 0).putValue("Oranges");
sheet.cells.get(1, 1).putValue(5);
sheet.cells.get(2, 1).putValue(2);
sheet.cells.get(3, 1).putValue(1);
sheet.cells.get(4, 1).putValue(4);
// Add a chart to the worksheet
const chartIndex = sheet.charts.add(AsposeCells.ChartType.Column, 7, 7, 15, 15);
const chart = sheet.charts.get(chartIndex);
// Set data range (converted from setChartDataRange -> chartDataRange property)
chart.chartDataRange = "A1:B5";
// Set AutoFilter range (converted from setRange -> range property)
sheet.autoFilter.range = "A1:B5";
// Add filters for a filter column.
sheet.autoFilter.addFilter(0, "Bananas");
sheet.autoFilter.addFilter(0, "Oranges");
// Apply the filters
sheet.autoFilter.refresh();
// Export chart image (returns image data)
const imageData = chart.toImage("Autofilter.png");
// Save the modified workbook
const outputData = workbook.save(SaveFormat.Xlsx);
// Prepare Excel download link
const blob = new Blob([outputData]);
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'Autofilter.xlsx';
downloadLink.style.display = 'inline-block';
downloadLink.textContent = 'Download Excel File';
// Prepare image download link if image data exists
if (imageData) {
const imgBlob = new Blob([imageData], { type: 'image/png' });
imageDownloadLink.href = URL.createObjectURL(imgBlob);
imageDownloadLink.download = 'Autofilter.png';
imageDownloadLink.style.display = 'inline-block';
imageDownloadLink.textContent = 'Download Chart Image';
} else {
imageDownloadLink.style.display = 'none';
}
resultDiv.innerHTML = '<p style="color: green;">Operation completed successfully! Use the download links to get the modified files.</p>';
});
</script>
</html>
3. 使用表格过滤数据并使图表发生变化
使用表格类似于方法2，使用范围，但表格比范围有优势。当您将范围更改为表格并添加数据时，图表会自动更新。使用范围时，您将不得不更改数据源。
在Excel中格式化为表格
单击数据内部并使用CTRL + T或使用主页选项卡，格式为表格
示例代码
以下示例代码加载了示例Excel文件，展示了使用Aspose.Cells实现相同功能。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Example Title</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<a id="downloadLinkBefore" style="display: none;">Download Before Image</a>
<a id="downloadLinkAfter" style="display: none;">Download After Image</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access first worksheet
const sheet = workbook.worksheets.get(0);
// Access the instance of the newly added chart
const chartIndex = sheet.charts.add(AsposeCells.ChartType.Column, 7, 7, 15, 15);
const chart = sheet.charts.get(chartIndex);
// Set data range (converted from setter to property)
chart.chartDataRange = { range: "A1:B7", isVertical: true };
// Convert the chart to image (before)
const beforeImageData = chart.toImage(SaveFormat.Png);
const beforeBlob = new Blob([beforeImageData]);
const beforeLink = document.getElementById('downloadLinkBefore');
beforeLink.href = URL.createObjectURL(beforeBlob);
beforeLink.download = 'TableFilters.before.png';
beforeLink.style.display = 'block';
beforeLink.textContent = 'Download Chart Before Image';
// Add a new List Object to the worksheet
const listObjectIndex = sheet.listObjects.add("A1", "B7", true);
const listObject = sheet.listObjects.get(listObjectIndex);
// Add default style to the table
listObject.tableStyleType = AsposeCells.TableStyleType.TableStyleMedium10;
// Show Total
listObject.showTotals = false;
// Add filters for a filter column.
listObject.autoFilter.addFilter(0, "James");
// Apply the filters
listObject.autoFilter.refresh();
// After adding new value the chart will change
listObject.putCellValue(7, 0, "Me");
listObject.putCellValue(7, 1, 1000);
// Check the changed images (after)
const afterImageData = chart.toImage(SaveFormat.Png);
const afterBlob = new Blob([afterImageData]);
const afterLink = document.getElementById('downloadLinkAfter');
afterLink.href = URL.createObjectURL(afterBlob);
afterLink.download = 'TableFilters.after.png';
afterLink.style.display = 'block';
afterLink.textContent = 'Download Chart After Image';
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'TableFilter.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Use the download links to get the result files.</p>';
});
</script>
</html>