Eje principal y secundario con JavaScript vía C++
Contents
[
Hide
]
Escenarios de uso posibles
Cuando los números en un gráfico varían ampliamente de serie de datos a serie de datos, o cuando se tienen tipos mixtos de datos (precio y volumen), se traza una o más series de datos en un eje vertical (valor) secundario. La escala del eje vertical secundario muestra los valores de las series de datos asociadas. Un eje secundario funciona bien en un gráfico que muestra una combinación de gráficos de columnas y líneas.
Manejar el eje primario y secundario como en Microsoft Excel
Por favor, vea el siguiente código de ejemplo que crea un nuevo archivo Excel y coloca los valores del gráfico en la primera hoja. Luego agregamos un gráfico y mostramos el segundo eje.
Código de muestra
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Primary and Secondary Axis 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, LegendPositionType, FillType, Utils } = 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 the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Access the first worksheet.
const worksheet = workbook.worksheets.get(0);
// Put the sample values used in a chart
worksheet.cells.get("A1").value = "Region";
worksheet.cells.get("A2").value = "Peking";
worksheet.cells.get("A3").value = "New York";
worksheet.cells.get("A4").value = "Paris";
worksheet.cells.get("B1").value = "Sales Volume";
worksheet.cells.get("C1").value = "Growth Rate";
worksheet.cells.get("B2").value = 100;
worksheet.cells.get("B3").value = 80;
worksheet.cells.get("B4").value = 140;
worksheet.cells.get("C2").value = 0.7;
worksheet.cells.get("C3").value = 0.8;
worksheet.cells.get("C4").value = 1.0;
// Create a Scatter chart
const pieIdx = worksheet.charts.add(ChartType.Scatter, 6, 6, 15, 11);
// Retrieve the Chart object
const chart = worksheet.charts.get(pieIdx);
// Add Series
chart.nSeries.add("B2:C4", true);
// Set the category data
chart.nSeries.categoryData = "=Sheet1!$A$2:$A$4";
// Set the Second-Axis
chart.nSeries.get(1).plotOnSecondAxis = true;
// Show the Second-Axis
chart.secondValueAxis.isVisible = true;
// Set the second series ChartType to line
chart.nSeries.get(1).type = ChartType.Line;
// Set the series name
chart.nSeries.get(0).name = "Sales Volume";
chart.nSeries.get(1).name = "Growth Rate";
// Set the Legend at the bottom of the chart area
chart.legend.position = LegendPositionType.Bottom;
// Fill the PlotArea area with nothing
chart.plotArea.area.fillFormat.fillType = FillType.None;
// Save the file
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'PrimaryandSecondaryAxis.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>