Imposta la fonte dati per il grafico con JavaScript via C++
Contents
[
Hide
]
Nei nostri argomenti precedenti, abbiamo già fornito molti esempi per dimostrare come puoi impostare una sorgente di dati per il tuo grafico, ma in questo argomento, forniremo ulteriori dettagli sui tipi di dati che possono essere impostati per un grafico.
Impostazione dei dati del grafico
Ci sono due tipi di dati con cui lavorare mentre si lavora sui grafici utilizzando Aspose.Cells come segue:
- Dati del grafico.
- Dati di categoria.
Dati del grafico
I dati del grafico sono i dati che utilizziamo come fonte per costruire i nostri grafici. Possiamo aggiungere un intervallo di celle (contente dati del grafico) chiamando il metodo add(string, boolean) dell’oggetto SeriesCollection.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Add Worksheet 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>
<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 Excel 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 = 170;
worksheet.cells.get("A4").value = 300;
worksheet.cells.get("B1").value = 160;
worksheet.cells.get("B2").value = 32;
worksheet.cells.get("B3").value = 50;
worksheet.cells.get("B4").value = 40;
// Adding sample values to cells as category data
worksheet.cells.get("C1").value = "Q1";
worksheet.cells.get("C2").value = "Q2";
worksheet.cells.get("C3").value = "Y1";
worksheet.cells.get("C4").value = "Y2";
// 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 "B4"
chart.nSeries.add("A1:B4", true);
// 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 = 'output.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>
Dati di categoria
I dati di categoria sono usati per l’etichettatura dei dati del grafico e possono essere aggiunti a SeriesCollection utilizzando la sua proprietà categoryData. Un esempio completo è mostrato di seguito per dimostrare l’uso dei dati di grafico e di categoria. Dopo aver eseguito il codice di esempio sopra, verrà aggiunto un grafico a colonne al foglio di lavoro come mostrato di seguito.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells - Create Workbook with 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>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, ChartType } = 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');
// Instantiate or load workbook
let workbook;
if (fileInput.files.length) {
const arrayBuffer = await fileInput.files[0].arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Adding a new worksheet to the Excel 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(10);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(170);
worksheet.cells.get("A4").putValue(200);
worksheet.cells.get("B1").putValue(120);
worksheet.cells.get("B2").putValue(320);
worksheet.cells.get("B3").putValue(50);
worksheet.cells.get("B4").putValue(40);
// Adding sample values to cells as category data
worksheet.cells.get("C1").putValue("Q1");
worksheet.cells.get("C2").putValue("Q2");
worksheet.cells.get("C3").putValue("Y1");
worksheet.cells.get("C4").putValue("Y2");
// 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 "B4"
chart.nSeries.add("A1:B4", true);
// Setting the data source for the category data of SeriesCollection
chart.nSeries.categoryData = "C1:C4";
// 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 = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created. Click the download link to save the file.</p>';
});
</script>
</html>
Argomenti avanzati
- Modifica dell’origine dei dati del grafico al foglio di lavoro di destinazione durante la copia delle righe o dell’intervallo
- Creazione di grafici dinamici
- Metodo semplice per configurare i grafici utilizzando il metodo Chart.chartDataRange
- Trova il tipo di valori X e Y dei punti nella serie del grafico