تخصيص الرسم البياني باستخدام amCharts

لحذف حقوق النسخ الخاصة بالرسم البياني في amCharts، يمكنك استخدام خيار creditsText لتعيين نص مخصص لحقوق النسخ بدلاً من النص الافتراضي. يمكنك ضبط هذا الخيار إما عن طريق إعداده مباشرة في سطر الأوامر الخاص بالرسم البياني، أو يمكنك إضافته في الخيارات العامة للرسم البياني الذي تستخدمه. في الحالة التي وجدناها في jsFiddle، يمكنك إضافة الخيار التالي لإزالة النص “JS chart by amCharts”:

javascriptCopy code
"creditsText": ""

في النهاية، ستبدو الخيارات الكاملة لرسم البياني كما يلي:

javascriptCopy code
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
  "category": "Category 1",
  "value": 100
}, {
  "category": "Category 2",
  "value": 200
}, {
  "category": "Category 3",
  "value": 300
}];
chart.paddingRight = 20;

// Remove the credits text
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.filePrefix = "chart_export";
chart.exporting.menu.items[0].label = "تصدير";
chart.exporting.menu.items[0].menu = new am4core.ExportMenu();
chart.exporting.menu.items[0].menu.items[0].label = "PNG";
chart.exporting.menu.items[0].menu.items[1].label = "JPG";
chart.exporting.menu.items[0].menu.items[2].label = "PDF";
chart.exporting.menu.items[0].menu.items[3].label = "SVG";

chart.exporting.menu.verticalAlign = "top";
chart.exporting.menu.align = "left";

chart.exporting.formatOptions.getKey("png").disabled = true;
chart.exporting.formatOptions.getKey("jpg").disabled = true;
chart.exporting.formatOptions.getKey("pdf").disabled = true;
chart.exporting.formatOptions.getKey("svg").disabled = true;

chart.exporting.adapter.add("data", function(data) {
  data = {
    "content": [{
      "image": "function print_chart() {",
      "format": "image/png"
    }, {
      "content": null,
      "format": "image/png"
    }, {
      "content": null,
      "format": "image/png"
    }],
    "type": "png"
  };
  return data;
});

chart.exporting.adapter.add("fileName", function(fileName) {
  return fileName;
});

chart.exporting.adapter.add("pdfMake", function(pdfMake, target) {
  return pdfMake;
});

chart.exporting.adapter.add("pdfMakeDefinitions", function(pdfMake, target) {
  return pdfMake;
});

chart.exporting.adapter.add("pdfMakeStyles", function(pdfMake, target) {
  return pdfMake;
});

chart.exporting.adapter.add("svgStyles", function(svgStyles, target) {
  return svgStyles;
});

chart.exporting.adapter.add("svgUrl", function(svgUrl, target) {
  return svgUrl;
});

chart.exporting.adapter.add("xAxis", function(xAxis, target) {
  return xAxis;
});

chart.exporting.adapter.add("yAxis", function(yAxis, target) {
  return yAxis;
});

chart.exporting.adapter.add("logo", function(logo, target) {
  return null;
});

chart.exporting.adapter.add("logoUrl", function(logoUrl, target) {
  return null;
});

// Add the credits text
chart.exporting.adapter.add("creditsText", function(creditsText, target) {
  return "";
});

chart.exporting.adapter.add("format", function(format, target) {
  return format;
});

لإضافة المزيد من المعلومات، يمكنك استخدام خيارات أخرى في amCharts لتخصيص الرسم البياني بالطريقة التي تناسب احتياجاتك. على سبيل المثال، يمكنك تغيير لون الخلفية باستخدام خيار background.fill، وتغيير الخطوط والألوان باستخدام خيارات fontFamily و fontSize و color، وتغيير العنوان باستخدام خيار title.text، وهكذا.

إليك مثالًا على كيفية تخصيص بعض هذه الخيارات:

javascriptCopy code
// تخصيص لون الخلفية
chart.background.fill = am4core.color("#f0f0f0");

// تخصيص الخطوط
chart.fontSize = 12;
chart.fontFamily = "Arial";
chart.color = am4core.color("#333333");

// تخصيص العنوان
chart.title.text = "عنوان الرسم البياني";

// إضافة تحكم بالتكبير والتصغير
chart.zoomOutButton.disabled = true;

// تغيير موضع وحجم الأسهم
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineY.strokeOpacity = 0;
chart.cursor.fullWidthLineX = true;
chart.cursor.fullWidthLineY = true;
chart.cursor.lineX.fill = am4core.color("#000");
chart.cursor.lineY.fill = am4core.color("#000");
chart.cursor.lineX.strokeWidth = 1;
chart.cursor.lineY.strokeWidth = 1;

هذه أمثلة بسيطة على كيفية تخصيص الرسم البياني باستخدام amCharts. يمكنك استكشاف المزيد من الخيارات والإعدادات في دليل المستخدم الخاص بـ amCharts للحصول على مزيد من التفاصيل والخيارات المتاحة.