Impostare l aspetto del grafico con JavaScript via C++
Contents
[
Hide
]
Impostazione dell’aspetto del grafico
Nella guida su Come creare un grafico abbiamo dato una breve introduzione ai tipi di grafici e oggetti grafici offerti da Aspose.Cells, e descritto come crearne uno. Questo articolo discute come personalizzare l’aspetto dei grafici impostandone le proprietà:
- Impostazione dell’area del grafico.
- Impostazione delle linee del grafico.
- Applicazione dei temi.
- Impostazione dei titoli dei grafici e degli assi.
- Lavorare con linee della griglia.
Impostazione dell’Area del Grafico
Ci sono diversi tipi di aree in un grafico e Aspose.Cells offre la flessibilità di modificare l’aspetto di ciascuna area. Gli sviluppatori possono applicare diverse impostazioni di formattazione su un’area cambiandone il colore di primo piano, il colore di sfondo e il formato di riempimento, ecc.
Nell’esempio di seguito, abbiamo applicato diverse impostazioni di formattazione su diversi tipi di aree di un grafico. Queste aree includono:
- Area del tracciato
- Area del grafico
- Area di raccolta serie
- Area di un singolo punto in una Serie di raccolta
Il seguente frammento di codice dimostra come impostare l’area del grafico.
<!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>
Impostazione delle Linee del Grafico
Gli sviluppatori possono applicare anche diversi tipi di stili sulle linee o sui marcatori dei SeriesCollection. Il seguente esempio di codice dimostra come impostare le linee del grafico usando l’API di Aspose.Cells.
<!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>
Applicazione dei Temi Microsoft Excel 2007/2010 ai Grafici
Gli sviluppatori possono applicare diversi temi/Colori di Microsoft Excel alla SeriesCollection o ad altri oggetti grafici come mostrato nell’esempio.
<!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>
Impostare i Titoli dei Grafici o degli Assi
Puoi usare Microsoft Excel per impostare i titoli di un grafico e dei suoi assi in un ambiente WYSIWYG. Aspose.Cells permette anche agli sviluppatori di impostare i titoli del grafico e dei suoi assi in fase di esecuzione. Tutti i grafici e i loro assi contengono la proprietà Title che può essere usata per impostare i loro titoli come mostrato nell’esempio.
Il seguente frammento di codice dimostra come impostare i titoli ai grafici e agli assi.
<!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>
Lavorare con le linee di griglia principali
È possibile personalizzare l’aspetto delle linee di griglia principali. Nascondere o mostrare le linee di griglia, o definire il loro colore e altre impostazioni. Di seguito, mostriamo come nascondere le linee di griglia e come cambiarne il colore.
Nascondere le linee di griglia principali
Gli sviluppatori possono controllare la visibilità delle linee della griglia principali impostando la proprietà isVisible() dell’oggetto Line su true o false.
Il seguente esempio di codice dimostra come nascondere le linee della griglia principali. Dopo aver nascosto le linee della griglia principali, verrà aggiunto un grafico a colonne al foglio di lavoro senza linee della griglia.
<!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>
Modifica delle impostazioni delle linee di griglia principali
Gli sviluppatori non possono solo controllare la visibilità delle linee di griglia principali, ma anche altre proprietà, inclusi il colore, ecc.
Il seguente esempio di codice dimostra come cambiare il colore delle linee della griglia principali. Dopo aver impostato il colore delle linee della griglia principali, verrà aggiunto un grafico a colonne al foglio di lavoro con linee della griglia modificate.
<!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>