JavaScript ile C++ aracılığıyla grafik oluşturma ve yönetme
Grafikler Oluşturma
Basitçe bir Grafik Oluşturma
Aşağıdaki örnek kodlarla Aspose.Cells ile bir grafik oluşturmak oldukça basittir:
<!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 } = 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 with the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Obtaining the reference of the first worksheet
const worksheet = workbook.worksheets.get(0);
// Adding sample values to cells
worksheet.cells.get("A2").value = "Category1";
worksheet.cells.get("A3").value = "Category2";
worksheet.cells.get("A4").value = "Category3";
worksheet.cells.get("B1").value = "Column1";
worksheet.cells.get("B2").value = 4;
worksheet.cells.get("B3").value = 20;
worksheet.cells.get("B4").value = 50;
worksheet.cells.get("C1").value = "Column2";
worksheet.cells.get("C2").value = 50;
worksheet.cells.get("C3").value = 100;
worksheet.cells.get("C4").value = 150;
// 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);
// Setting chart data source as the range "A1:C4"
chart.chartDataRange = { range: "A1:C4", isSeriesInRows: 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;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Bir Grafik Oluşturmak için Bilinmesi Gerekenler
Grafik oluşturulmadan önce, Aspose.Cells kullanarak grafik oluştururken yardımcı olacak bazı temel kavramları anlamak önemlidir.
Grafikleme Nesneleri
Grafik nesneleri aşağıda listelenmiştir:
- Seri, bir grafikte tek veri serisi.
- Eksen, bir grafik eksenleri.
- Grafik, tek bir Excel grafiği.
- GrafikAlanı, çalışma sayfasındaki grafik alanı.
- GrafikVeriTablosu, bir grafik veri tablosu.
- GrafikÇerçeve, bir grafikteki çerçeve nesnesi.
- GrafikNokta, bir grafikteki seri içindeki tek bir nokta.
- GrafikNoktaKoleksiyonu, bir serideki tüm noktaları içeren bir koleksiyon.
- Grafikler, Grafik nesnelerinin bir koleksiyonu.
- VeriEtiketleri, belirtilen seri için tüm VeriEtiketi nesnelerinin bir koleksiyonu.
- DoldurBiçimi, bir şeklin doldurulma biçimi.
- Zemin, 3B bir grafik zemini.
- Efsane, grafik efsanesi.
- Çizgi, grafik çizgisi.
- SeriKoleksiyonu, Seri nesnelerinin bir koleksiyonu.
- İşaretEtiketleri, bir grafik eksenindeki işaret etiketleri ile ilişkili olan işaret etiketi etiketleri.
- Başlık, bir grafik veya eksenin başlığı.
- Trend Çizgisi, bir grafikteki bir trend çizgisi.
- Trend Çizgisi Koleksiyonu, belirtilen veri serisi için tüm Trend Çizgisi nesnelerinin bir koleksiyonu.
- Duvarlar, 3D bir grafikte duvarlar.
Grafik Nesneleri Kullanma
Yukarıda belirtildiği gibi, tüm grafik nesneleri, ilgili sınıfların örnekleridir ve belirli görevleri yerine getirmek için belirli özellikler ve metotlar sağlar. Grafik nesnelerini kullanarak grafikler oluşturun.
Bir çalışma sayfasına herhangi bir grafik eklemek için charts koleksiyonunu kullanın. charts koleksiyonundaki her öğe bir Chart nesnesini temsil eder. Bir Chart nesnesi, grafiğin görünümünü özelleştirmek için gereken diğer tüm grafik nesnelerini kapsar. Birkaç temel grafik nesnesi kullanarak basit bir grafik yaratmanın yolu aşağıda gösterilmektedir.
Aspose.Cells Kullanarak Grafik Oluşturma
- Cell nesnesinin putValue(string) metodunu kullanarak çalışma sayfası hücrelerine bazı veriler ekleyin. Bu, grafik veri kaynağı olarak kullanılacaktır.
- Çalışma sayfasına grafik eklemek için, ChartCollection koleksiyonunun add metodunu çağırın ve bu işlem Worksheet nesnesine sarılmıştır.
- Grafik türünü ChartType enumerasyonu ile belirtin. Örneğin, aşağıdaki örnek ChartType.Pyramid değeri grafiğin türü olarak kullanır.
- İndeksini geçirerek Charts koleksiyonundan yeni Chart nesnesine erişin.
- Grafiği yönetmek için Chart nesnesine gömülü herhangi bir grafik nesnesini kullanın. Aşağıdaki örnek, SeriesCollection grafik nesnesini kullanarak grafiğin veri kaynağını belirtir.
Grafiğe kaynak veri eklerken, veri kaynağı hücre aralığı (örneğin “A1:C3”), ardışık olmayan hücre dizisi (örneğin “A1, A3, A5”) veya değer dizisi (örneğin “1,2,3”) olabilir.
Bu genel adımlar, herhangi bir türde bir grafik oluşturmanıza olanak tanır. Farklı grafikler oluşturmak için farklı grafik nesnelerini kullanın.
Aspose.Cells ile birçok farklı türde grafik oluşturmak mümkündür. Aspose.Cells tarafından desteklenen tüm standart grafikler, ChartType olarak adlandırılan bir numaralandırmada önceden tanımlanmıştır.
Önceden tanımlanmış grafik tipleri:
| Grafik Tipleri | Açıklama |
|---|---|
| Column | Temsil Edilen Kümeleme Sutun Grafiği |
| ColumnStacked | Tasvir Yığılmış Sutun Grafiği |
| Column100PercentStacked | Tasvir 100% Yığılmış Sutun Grafiği |
| Column3DClustered | Tasvir 3D Küme Sutun Grafiği |
| Column3DStacked | Tasvir 3D Yığılmış Sutun Grafiği |
| Column3D100PercentStacked | Tasvir 3D 100% Yığılmış Sutun Grafiği |
| Column3D | Tasvir 3D Sutun Grafiği |
| Bar | Tasvir Kümeleme Çubuk Grafiği |
| BarStacked | Yığın Çubuk Grafiğini Temsil Eder |
| Bar100PercentStacked | 100% Yığılmış Çubuk Grafiğini Temsil Eder |
| Bar3DClustered | 3D Küme Çubuk Grafiğini Temsil Eder |
| Bar3DStacked | 3D Yığılmış Çubuk Grafiğini Temsil Eder |
| Bar3D100PercentStacked | 3D 100% Yığılmış Çubuk Grafiğini Temsil Eder |
| Line | Çizgi Grafiğini Temsil Eder |
| LineStacked | Yığılmış Çizgi Grafiğini Temsil Eder |
| Line100PercentStacked | 100% Yığılmış Çizgi Grafiğini Temsil Eder |
| LineWithDataMarkers | Veri İşaretleri Bulunan Çizgi Grafiğini Temsil Eder |
| LineStackedWithDataMarkers | Veri İşaretleri Bulunan Yığılmış Çizgi Grafiğini Temsil Eder |
| Line100PercentStackedWithDataMarkers | 100% Yığılmış Veri İşaretleri Bulunan Çizgi Grafiğini Temsil Eder |
| Line3D | 3D Çizgi Grafiğini Temsil Eder |
| Pie | Pasta Grafiğini Temsil Eder |
| Pie3D | 3D Pasta Grafiğini Temsil Eder |
| PiePie | Pasta Grafiğinde Pasta Temsil Eder |
| PieExploded | Patlamış Pasta Grafiğini Temsil Eder |
| Pie3DExploded | 3D Patlamış Pasta Grafiğini Temsil Eder |
| PieBar | Pasta Grafiğinde Çubuk Temsil Eder |
| Scatter | Saçılma Grafiğini Temsil Eder |
| ScatterConnectedByCurvesWithDataMarker | Eğrilerle Bağlı Veri İşaretleri Bulunan Saçılma Grafiğini Temsil Eder |
| ScatterConnectedByCurvesWithoutDataMarker | Eğrilerle Bağlı Veri İşaretleri Bulunmayan Saçılma Grafiğini Temsil Eder |
| ScatterConnectedByLinesWithDataMarker | Çizgilerle Bağlı Veri İşaretleri Bulunan Saçılma Grafiğini Temsil Eder |
| ScatterConnectedByLinesWithoutDataMarker | Çizgilerle Bağlı Veri İşaretleri Bulunmayan Saçılma Grafiğini Temsil Eder |
| Area | Alan Grafiğini Temsil Eder |
| AreaStacked | Yığılmış Alan Grafiğini Temsil Eder |
| Area100PercentStacked | 100% Yığılmış Alan Grafiğini Temsil Eder |
| Area3D | 3D Alan Grafiğini Temsil Eder |
| Area3DStacked | 3D Yığılmış Alan Grafiğini Temsil Eder |
| Area3D100PercentStacked | 3D 100% Yığılmış Alan Grafiğini Temsil Eder |
| Doughnut | Donut Grafiğini Temsil Eder |
| DoughnutExploded | Exploded Doughnut Chartını Temsil Ediyor |
| Radar | Radar Grafiğini Temsil Ediyor |
| RadarWithDataMarkers | Veri İşaretçileri olan Radar Grafiğini Temsil Ediyor |
| RadarFilled | Dolu Radar Grafiğini Temsil Ediyor |
| Surface3D | 3 boyutlu Yüzey Grafiğini Temsil Ediyor |
| SurfaceWireframe3D | Tel Kafesli 3 Boyutlu Yüzey Grafiğini Temsil Ediyor |
| SurfaceContour | Kontur Grafiğini Temsil Ediyor |
| SurfaceContourWireframe | Tel Kafesli Kontur Grafiğini Temsil Ediyor |
| Bubble | Balon Grafiğini Temsil Ediyor |
| Bubble3D | 3 Boyutlu Balon Grafiğini Temsil Ediyor |
| Cylinder | Silindir Grafiğini Temsil Ediyor |
| CylinderStacked | Yığılmış Silindir Grafiğini Temsil Ediyor |
| Cylinder100PercentStacked | 100% Yığılmış Silindir Grafiğini Temsil Ediyor |
| CylindericalBar | Silindirik Çubuk Grafiğini Temsil Ediyor |
| CylindericalBarStacked | Yığılmış Silindirik Çubuk Grafiğini Temsil Ediyor |
| CylindericalBar100PercentStacked | 100% Yığılmış Silindirik Çubuk Grafiğini Temsil Ediyor |
| CylindericalColumn3D | 3 Boyutlu Silindirik Sütun Grafiğini Temsil Ediyor |
| Cone | Konik Grafiğini Temsil Ediyor |
| ConeStacked | Yığılmış Konik Grafiğini Temsil Ediyor |
| Cone100PercentStacked | 100% Yığılmış Konik Grafiğini Temsil Ediyor |
| ConicalBar | Konik Çubuk Grafiğini Temsil Ediyor |
| ConicalBarStackedStacked Konik Çubuk Grafiğini Temsil Ediyor | |
| ConicalBar100PercentStacked | 100% Yığılmış Konik Çubuk Grafiğini Temsil Ediyor |
| ConicalColumn3D | 3 Boyutlu Konik Sütun Grafiğini Temsil Ediyor |
| Pyramid | Piramit Grafiğini Temsil Ediyor |
| PyramidStacked | Yığılmış Piramit Grafiğini Temsil Ediyor |
| Pyramid100PercentStacked | 100% Yığılmış Piramit Grafiğini Temsil Ediyor |
| PyramidBar | Piramit Çubuk Grafiğini Temsil Ediyor |
| PyramidBarStacked | Stacked Piramit Çubuk Grafiğini Temsil Ediyor |
| PyramidBar100PercentStacked | 100% Yığılmış Piramit Çubuk Grafiğini Temsil Ediyor |
| PyramidColumn3D | 3D Piramit Sutun Grafiğini Temsil Eder |
Piramit Grafiği
Örnek kod çalıştırıldığında, bir piramit grafiği çalışma sayfasına eklenir.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Example - Create Chart and Download</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');
// If a file is provided, load it; otherwise create a new 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 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 = 150;
worksheet.cells.get("B1").value = 4;
worksheet.cells.get("B2").value = 20;
worksheet.cells.get("B3").value = 50;
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(ChartType.Pyramid, 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);
// 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 and chart added. Click the download link to get the file.</p>';
});
</script>
</html>
Çizgi Grafiği
Yukarıdaki örnekte, ChartType yerine Line yazarak bir çizgi grafiği oluşturulur. Tam kaynak aşağıda sağlanmıştır. Kod çalıştırıldığında, çalışma sayfasına bir çizgi grafiği eklenir.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Add Chart</title>
</head>
<body>
<h1>Add 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, 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 () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
resultDiv.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 by loading the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// 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 = 150;
worksheet.cells.get("B1").value = 4;
worksheet.cells.get("B2").value = 20;
worksheet.cells.get("B3").value = 50;
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(AsposeCells.ChartType.Line, 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);
// 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';
resultDiv.innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Kabarcık Grafiği
Bir balon grafiği oluşturmak için, ChartType değeri ChartType.Bubble olarak ayarlanmalı ve BubbleSizes, Values ve XValues gibi birkaç ek özellik uygun şekilde ayarlanmalıdır. Aşağıdaki kod çalıştırıldığında, çalışma sayfasına bir balon grafiği eklenir.
Veri İşaretçisi ile Çizgi Grafiği
Veri işaretçili çizgi grafik oluşturmak için, ChartType değeri ChartType.LineWithDataMarkers olarak ayarlanmalı ve arka plan alanı, Seriler İşaretçileri, Değerler ve XValues gibi birkaç ek özellik uygun şekilde ayarlanmalıdır. Aşağıdaki kod çalıştırıldığında, çalışma sayfasına veri işaretçili çizgi grafik eklenir.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Line With Data Marker Chart</title>
</head>
<body>
<h1>Line With Data Marker Chart Example</h1>
<p>You may optionally select an existing Excel file to modify, or leave empty to create a new workbook.</p>
<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');
if (fileInput.files.length === 0) {
// Proceed with a new workbook if no file selected
}
const downloadLink = document.getElementById('downloadLink');
const result = document.getElementById('result');
// Instantiate 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();
}
// Access first worksheet
const worksheet = workbook.worksheets.get(0);
// Set columns title
worksheet.cells.get(0, 0).putValue("X");
worksheet.cells.get(0, 1).putValue("Y");
// Random data shall be used for generating the chart
// Create random data and save in the cells
for (let i = 1; i < 21; i++) {
worksheet.cells.get(i, 0).putValue(i);
worksheet.cells.get(i, 1).putValue(0.8);
}
for (let i = 21; i < 41; i++) {
worksheet.cells.get(i, 0).putValue(i - 20);
worksheet.cells.get(i, 1).putValue(0.9);
}
// Add a chart to the worksheet
const idx = worksheet.charts.add(AsposeCells.ChartType.LineWithDataMarkers, 1, 3, 20, 20);
// Access the newly created chart
const chart = worksheet.charts.get(idx);
// Set chart style
chart.style = 3;
// Set autoscaling value to true
chart.autoScaling = true;
// Set foreground color white
chart.plotArea.area.foregroundColor = AsposeCells.Color.White;
// Set Properties of chart title
chart.title.text = "Sample Chart";
// Set chart type
chart.type = AsposeCells.ChartType.LineWithDataMarkers;
// Set Properties of categoryaxis title
chart.categoryAxis.title.text = "Units";
//Set Properties of nseries
const s2_idx = chart.nSeries.add("A2:A2", true);
const s3_idx = chart.nSeries.add("A22:A22", true);
// Set IsColorVaried to true for varied points color
chart.nSeries.isColorVaried = true;
// Set properties of background area and series markers
const series2 = chart.nSeries.get(s2_idx);
series2.area.formatting = AsposeCells.FormattingType.Custom;
series2.marker.area.foregroundColor = AsposeCells.Color.Yellow;
series2.marker.border.isVisible = false;
// Set X and Y values of series chart
series2.xValues = "A2:A21";
series2.values = "B2:B21";
// Set properties of background area and series markers for series3
const series3 = chart.nSeries.get(s3_idx);
series3.area.formatting = AsposeCells.FormattingType.Custom;
series3.marker.area.foregroundColor = AsposeCells.Color.Green;
series3.marker.border.isVisible = false;
// Set X and Y values of series chart
series3.xValues = "A22:A41";
series3.values = "B22:B41";
// Saving the modified Excel file
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'LineWithDataMarkerChart.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
result.innerHTML = '<p style="color: green;">Chart created successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Gelişmiş Konular
- Excel 2016 Grafiklerini Okuma ve Değiştirme
- Excel Grafik Eksenlerini Yönetme
- Grafik Görünümünü Ayarlama
- Grafik Türleri
- Grafikleri Özelleştirme
- Grafiğin Veri Kaynağını Ayarlama
- Excel Grafik Veri Etiketlerini Yönetme
- Grafiğin Çalışma Sayfasını Alma
- Excel Grafiklerinin Açıklamasını Yönetme
- Pozisyon Boyutunu ve Tasarımcı Grafiği Yönetme
- Lider Çizgili Pasta Grafiği Oluşturma
- Grafiplerde Şekiller
- Excel Grafik Başlıklarını Yönetme
- Grafik Rendeleme
- Grafik Eğrisi Trend Çizgisinin Denklem Metnini Alma