Come creare un grafico dinamico con menu a discesa usando JavaScript tramite C++
Possibili Scenari di Utilizzo
Un grafico dinamico con elenco a discesa in Excel è uno strumento potente che consente agli utenti di creare grafici interattivi che possono aggiornarsi dinamicamente in base ai dati selezionati. Questa funzione è particolarmente utile in situazioni in cui è necessario analizzare più set di dati o confrontare vari scenari.
Una comune applicazione di un grafico dinamico con elenco a discesa è nell’analisi finanziaria. Ad esempio, un’azienda potrebbe avere dati finanziari per diversi anni o reparti. Utilizzando un elenco a discesa, gli utenti possono selezionare il set di dati specifico che desiderano analizzare e il grafico si aggiornerà automaticamente per visualizzare le informazioni corrispondenti. Questo consente un facile confronto e identificazione di tendenze o pattern.
Un’altra applicazione è nelle vendite e nel marketing. Un’azienda potrebbe avere dati di vendita per diversi prodotti o regioni. Con un grafico dinamico con elenco a discesa, gli utenti possono scegliere un prodotto o una regione specifica dall’elenco a discesa e il grafico si aggiornerà dinamicamente per mostrare le performance di vendita per l’opzione selezionata. Ciò aiuta a identificare le aree o i prodotti più performanti e a prendere decisioni basate sui dati.
In sintesi, un grafico dinamico con elenco a discesa in Excel fornisce un modo flessibile e interattivo per visualizzare e analizzare i dati. È prezioso in situazioni in cui è necessario confrontare più set di dati o esplorare diversi scenari, rendendolo uno strumento versatile per l’analisi finanziaria, le vendite e il marketing e molte altre applicazioni.
Usa Aspose Cells per creare un grafico dinamico con elenco a discesa
Nei paragrafi successivi, ti mostreremo come creare un grafico dinamico con menu a discesa usando Aspose.Cells for JavaScript tramite C++. Mostreremo il codice dell’esempio, così come il file Excel creato con questo codice.
Codice di Esempio
Il seguente codice di esempio genererà il File del grafico dinamico con elenco a discesa.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Dynamic Chart with Dropdown List 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, CellArea, ValidationType, BackgroundType, Color, 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 () => {
// Create a new workbook and access the first worksheet.
const workbook = new Workbook();
const sheets = workbook.worksheets;
const sheet = sheets.get(0);
// Populate the data for the chart. Add values to cells and set series names.
sheet.cells.get("A3").putValue("Tea");
sheet.cells.get("A4").putValue("Coffee");
sheet.cells.get("A5").putValue("Sugar");
// In this example, we will add 12 months of data
sheet.cells.get("B2").putValue("Jan");
sheet.cells.get("C2").putValue("Feb");
sheet.cells.get("D2").putValue("Mar");
sheet.cells.get("E2").putValue("Apr");
sheet.cells.get("F2").putValue("May");
sheet.cells.get("G2").putValue("Jun");
sheet.cells.get("H2").putValue("Jul");
sheet.cells.get("I2").putValue("Aug");
sheet.cells.get("J2").putValue("Sep");
sheet.cells.get("K2").putValue("Oct");
sheet.cells.get("L2").putValue("Nov");
sheet.cells.get("M2").putValue("Dec");
const allMonths = 12;
const iCount = 3;
for (let i = 0; i < iCount; i++) {
for (let j = 0; j < allMonths; j++) {
const _row = i + 2;
const _column = j + 1;
sheet.cells.get(_row, _column).putValue(50 * (i % 2) + 20 * (j % 3) + 10 * (i / 3) + 10);
}
}
// This is the Dropdownlist for Dynamic Data
const ca = CellArea.createCellArea(9, 0, 9, 0);
const _index = sheet.validations.add(ca);
const _va = sheet.validations.get(_index);
_va.type = ValidationType.List;
_va.inCellDropDown = true;
_va.formula1 = "=$B$2:$M$2";
sheet.cells.get("A9").putValue("Current Month");
sheet.cells.get("A10").putValue("Jan");
const _style = sheet.cells.get("A10").style;
_style.font.isBold = true;
_style.pattern = BackgroundType.Solid;
_style.foregroundColor = Color.Yellow;
sheet.cells.get("A10").style = _style;
// Set the dynamic range for the chart's data source.
let index = sheets.names.add("Sheet1!ChtMonthData");
sheets.names.get(index).refersTo = "=OFFSET(Sheet1!$A$3,0,MATCH($A$10, $B$2:$M$2, 0),3,1)";
// Set the dynamic range for the chart's data labels.
index = sheets.names.add("Sheet1!ChtXLabels");
sheets.names.get(index).refersTo = "=Sheet1!$A$3:$A$5";
// Create a chart object and set its data source.
const chartIndex = sheet.charts.add(ChartType.Column, 8, 2, 20, 8);
const chart = sheet.charts.get(chartIndex);
chart.nSeries.add("month", true);
chart.nSeries.get(0).name = "=Sheet1!$A$10";
chart.nSeries.get(0).values = "Sheet1!ChtMonthData";
chart.nSeries.get(0).xValues = "Sheet1!ChtXLabels";
// Save the workbook as an 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 = 'DynamicChartWithDropdownlist.xlsx';
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 save the file.</p>';
});
</script>
</html>
Note
Nel file generato, il grafico conterà dinamicamente i dati per il mese selezionato. Questo viene fatto utilizzando la formula “OFFSET” nel codice di esempio: