Diagrammgestaltung mit JavaScript via C++
Contents
[
Hide
]
Diagrammaussehen festlegen
In How to Create a Chart haben wir eine kurze Einführung in die Arten von Diagrammen und Diagrammobjekten gegeben, die von Aspose.Cells angeboten werden, und beschrieben, wie man eines erstellt. In diesem Artikel wird erläutert, wie das Erscheinungsbild von Diagrammen durch Festlegen ihrer Eigenschaften angepasst werden kann:
- Festlegen des Diagrammbereichs.
- Festlegen von Diagrammlinien.
- Anwenden von Designs.
- Titel für Diagramme und Achsen festlegen.
- Arbeiten mit Gitterlinien.
Diagrammbereich einstellen
Es gibt verschiedene Arten von Bereichen in einem Diagramm und Aspose.Cells bietet die Flexibilität, das Erscheinungsbild jedes Bereichs zu ändern. Entwickler können verschiedene Formatierungseinstellungen auf einen Bereich anwenden, indem sie seine Vordergrundfarbe, Hintergrundfarbe und Füllformat usw. ändern.
Im untenstehenden Beispiel haben wir verschiedene Formatierungseinstellungen auf verschiedene Arten von Bereichen eines Diagramms angewendet. Diese Bereiche umfassen:
- Plot-Bereich
- Diagrammbereich
- SeriesCollection Bereich
- Fläche eines einzelnen Punktes in einer SeriesCollection
Der folgende Codeschnipsel zeigt, wie der Diagrammbereich festgelegt wird.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells 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');
// Create or load workbook
let workbook;
if (fileInput.files.length) {
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").value = 50;
worksheet.cells.get("A2").value = 100;
worksheet.cells.get("A3").value = 150;
worksheet.cells.get("B1").value = 60;
worksheet.cells.get("B2").value = 32;
worksheet.cells.get("B3").value = 50;
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(AsposeCells.ChartType.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = new AsposeCells.Color(0, 0, 255);
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = new AsposeCells.Color(255, 255, 0);
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = new AsposeCells.Color(255, 0, 0);
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = new AsposeCells.Color(0, 255, 255);
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [new AsposeCells.Color(0, 255, 0), 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and ready for download.</p>';
});
</script>
</html>
Einstellen von Diagramm Linien
Entwickler können auch verschiedene Arten von Stilen auf Linien oder Datenmarkierungen der SeriesCollection anwenden. Das folgende Codebeispiel zeigt, wie Diagrammlinien mit der Aspose.Cells API eingestellt werden.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells 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, Worksheet, Cell } = 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 () => {
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").putValue(50);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(150);
worksheet.cells.get("B1").putValue(60);
worksheet.cells.get("B2").putValue(32);
worksheet.cells.get("B3").putValue(50);
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(AsposeCells.ChartType.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = AsposeCells.Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = AsposeCells.Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = AsposeCells.Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = AsposeCells.Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [AsposeCells.Color.Lime, 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Applying a dotted line style on the lines of a SeriesCollection
chart.nSeries.get(0).border.style = AsposeCells.LineType.Dot;
// Applying a triangular marker style on the data markers of a SeriesCollection
chart.nSeries.get(0).marker.markerStyle = AsposeCells.ChartMarkerType.Triangle;
// Setting the weight of all lines in a SeriesCollection to medium
chart.nSeries.get(1).border.weight = AsposeCells.WeightType.MediumLine;
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Anwendung von Microsoft Excel 2007/2010-Themen auf Diagramme
Entwickler können verschiedene Microsoft Excel-Themen/Farben auf SeriesCollection oder andere Diagrammobjekte anwenden, wie im Beispiel gezeigt.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Update Chart Series Fill 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, FillType, ThemeColor, ThemeColorType } = 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();
// Loads the workbook containing the chart
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the first worksheet
const worksheet = workbook.worksheets.get(0);
// Get the first chart in the sheet
const chart = worksheet.charts.get(0);
// Specify the FillFormat's type to Solid Fill of the first series
const series = chart.nSeries.get(0);
series.area.fillFormat.fillType = FillType.Solid;
// Get the CellsColor of SolidFill
const cc = series.area.fillFormat.solidFill.cellsColor;
// Create a theme in Accent style
cc.themeColor = new ThemeColor(ThemeColorType.Accent6, 0.6);
// Apply the theme to the series
series.area.fillFormat.solidFill.cellsColor = cc;
// Save 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 = 'output.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart series fill updated successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Einstellen der Titel von Diagrammen oder Achsen
Sie können Microsoft Excel verwenden, um die Titel eines Diagramms und seiner Achsen in einer WYSIWYG-Umgebung festzulegen. Aspose.Cells ermöglicht es Entwicklern auch, die Titel eines Diagramms und seiner Achsen zur Laufzeit zu setzen. Alle Diagramme und ihre Achsen enthalten eine Title Eigenschaft, mit der ihre Titel eingestellt werden können, wie im Beispiel gezeigt.
Das folgende Codebeispiel zeigt, wie man Titel für Diagramme und Achsen setzt.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells 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, ChartType, GradientStyleType, Color } = 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 () => {
// Creating a new Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").putValue(50);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(150);
worksheet.cells.get("B1").putValue(60);
worksheet.cells.get("B2").putValue(32);
worksheet.cells.get("B3").putValue(50);
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(ChartType.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [Color.Lime, 1, GradientStyleType.Horizontal, 1];
// Setting the title of a chart
chart.title.text = "Title";
// Setting the font color of the chart title to blue
chart.title.font.color = Color.Blue;
// Setting the title of category axis of the chart
chart.categoryAxis.title.text = "Category";
// Setting the title of value axis of the chart
chart.valueAxis.title.text = "Value";
// Saving the Excel file and creating a download link
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Arbeiten mit Haupt-Gitterlinien
Es ist möglich, das Aussehen der Haupt-Gitterlinien anzupassen. Gitterlinien ausblenden oder anzeigen, oder ihre Farbe und andere Einstellungen definieren. Nachfolgend zeigen wir, wie die Gitterlinien ausgeblendet und wie ihre Farbe geändert wird.
Ausblenden von Haupt-Gitterlinien
Entwickler können die Sichtbarkeit der Haupt-Gitterlinien steuern, indem sie die isVisible() Eigenschaft des Line Objekts auf true oder false setzen.
Das folgende Codebeispiel zeigt, wie Hauptgitterlinien ausgeblendet werden. Nach dem Ausblenden der Hauptgitterlinien wird ein Säulendiagramm zur Arbeitsblatt hinzugefügt, bei dem keine Gitterlinien vorhanden sind.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells 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 () => {
// Instantiate a new Workbook
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").putValue(50);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(150);
worksheet.cells.get("B1").putValue(60);
worksheet.cells.get("B2").putValue(32);
worksheet.cells.get("B3").putValue(50);
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(AsposeCells.ChartType.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = AsposeCells.Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = AsposeCells.Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = AsposeCells.Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = AsposeCells.Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [AsposeCells.Color.Lime, 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Hiding the major gridlines of Category Axis
chart.categoryAxis.majorGridLines.isVisible = false;
// Hiding the major gridlines of Value Axis
chart.valueAxis.majorGridLines.isVisible = false;
// Saving the Excel file and preparing download link
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Ändern der Einstellungen für Haupt-Gitterlinien
Entwickler können nicht nur die Sichtbarkeit der Haupt-Gitterlinien, sondern auch andere Eigenschaften wie deren Farbe usw. steuern.
Das folgende Codebeispiel zeigt, wie man die Farbe der Hauptgitterlinien ändert. Nach dem Festlegen der Farbe der Hauptgitterlinien wird ein Säulendiagramm mit modifizierten Gitterlinien zum Arbeitsblatt hinzugefügt.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells 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, Worksheet, Cell } = 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 () => {
// Creating a new Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").value = 50;
worksheet.cells.get("A2").value = 100;
worksheet.cells.get("A3").value = 150;
worksheet.cells.get("B1").value = 60;
worksheet.cells.get("B2").value = 32;
worksheet.cells.get("B3").value = 50;
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(AsposeCells.ChartType.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = AsposeCells.Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = AsposeCells.Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = AsposeCells.Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = AsposeCells.Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [AsposeCells.Color.Lime, 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Setting the color of Category Axis' major gridlines to silver
chart.categoryAxis.majorGridLines.color = AsposeCells.Color.Silver;
// Setting the color of Value Axis' major gridlines to red
chart.valueAxis.majorGridLines.color = AsposeCells.Color.Red;
// Saving the Excel file and creating download link
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and ready for download.</p>';
});
});
</script>
</html>