AmCharts是一个功能强大的JavaScript图表库,用于创建各种类型的交互式图表和地图。要更改AmCharts中每个数据的边框颜色,您可以使用以下步骤:
stroke
或borderColor
的属性。data
的数组中,您可以遍历该数组并为每个数据对象设置边框颜色属性。以下是一个示例代码片段,演示如何使用AmCharts更改柱状图中每个数据的边框颜色:
// 导入AmCharts库
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
// 创建图表实例
let chart = am4core.create("chartdiv", am4charts.XYChart);
// 设置柱状图数据
chart.data = [{
"category": "Category 1",
"value": 10
}, {
"category": "Category 2",
"value": 20
}, {
"category": "Category 3",
"value": 15
}];
// 创建柱状图系列
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
// 设置每个柱子的边框颜色为红色
series.columns.template.stroke = am4core.color("#FF0000");
// 渲染图表
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.filePrefix = "chart";
chart.exporting.useWebFonts = false;
chart.exporting.formatOptions.pdf.textMargin = 20;
chart.exporting.formatOptions.pdf.fontSize = 10;
chart.exporting.formatOptions.pdf.addURL = false;
chart.exporting.formatOptions.pdf.pageSize = "A4";
chart.exporting.formatOptions.pdf.tableFontSize = 10;
chart.exporting.formatOptions.pdf.tableExportOptions = "default";
chart.exporting.formatOptions.pdf.scaleFactor = 0.8;
chart.exporting.formatOptions.svg.xmlDeclaration = false;
chart.exporting.formatOptions.svg.embedImages = true;
chart.exporting.formatOptions.svg.compress = true;
chart.exporting.formatOptions.svg.scale = 2;
chart.exporting.formatOptions.svg.useCSS = true;
chart.exporting.formatOptions.xlsx.tableau = false;
chart.exporting.formatOptions.print.title = "";
chart.exporting.formatOptions.print.beforePrint = () => chart.setChartTitle();
chart.exporting.formatOptions.print.afterPrint = () => chart.restoreChartTitle();
chart.exporting.formatOptions.print.printMethod = 'pdf';
chart.exporting.formatOptions.menu.title = "Export";
chart.exporting.formatOptions.menu.add("General Setup", chart.exporting.exportingOptions[0], 0);
chart.exporting.formatOptions.menu.add("Chart Type", chart.exporting.exportingOptions[1], 1);
chart.exporting.formatOptions.menu.add("Custom Font", chart.exporting.exportingOptions[2], 2);
chart.exporting.formatOptions.menu.add("Background Color", chart.exporting.exportingOptions[3], 3);
chart.exporting.formatOptions.menu.add("Text Color", chart.exporting.exportingOptions[4], 4);
chart.exporting.formatOptions.menu.add("Axis & Grid", chart.exporting.exportingOptions[5], 5);
chart.exporting.formatOptions.menu.add("Print", chart.exporting.exportingOptions[6], 6);
chart.exporting.formatOptions.menu.add("Worksheet", chart.exporting.exportingOptions[7], 7);
chart.exporting.formatOptions.menu.add("Page Setup", chart.exporting.exportingOptions[8], 8);
chart.exporting.formatOptions.menu.add("Read Sheet", chart.exporting.exportingOptions[9], 9);
chart.exporting.formatOptions.menu.add("Fit to Page", chart.exporting.exportingOptions[10], 10);
chart.exporting.formatOptions.menu.add("Column Format", chart.exporting.exportingOptions[11], 11);
chart.exporting.formatOptions.menu.add("Save As", chart.exporting.exportingOptions[12], 12);
chart.exporting.formatOptions.html.defaultFileName = "chart";
chart.exporting.formatOptions.html.exportOptions = {};
chart.exporting.formatOptions.html.exportOptions.error = undefined;
chart.exporting.formatOptions.html.exportOptions.orientation = "portrait";
chart.exporting.formatOptions.html.exportOptions.scale = 1;
chart.exporting.formatOptions.html.exportOptions.height = 650;
chart.exporting.formatOptions.html.exportOptions.width = 900;
chart.exporting.formatOptions.html.exportOptions.keepNonA4 = true;
chart.exporting.formatOptions.html.exportOptions.narrowingResolution = false;
chart.exporting.formatOptions.image.asPng = false;
chart.exporting.formatOptions.image.asJpg = true;
chart.exporting.formatOptions.image.width = 650;
chart.exporting.formatOptions.image.height = 400;
chart.exporting.formatOptions.image.quality = 90;
chart.exporting.formatOptions.json.formatData = true;
chart.exporting.formatOptions.json.columnGroups = true;
chart.exporting.formatOptions.json.columnTitles = true;
chart.exporting.formatOptions.pdf.floating = false;
chart.exporting.formatOptions.pdf.imageDPI = 300;
chart.exporting.formatOptions.pdf.imageQuality = 1;
chart.exporting.formatOptions.pdf.margins = 30;
chart.exporting.formatOptions.pdf.mirror = false;
chart.exporting.formatOptions.pdf.pageOrientation = "portrait";
chart.exporting.formatOptions.pdf.pageScale = 0.8;
chart.exporting.formatOptions.pdf.pageSize = "A4";
chart.exporting.formatOptions.pdf.tableData = true;
chart.exporting.formatOptions.pdf.tableLayout = false;
chart.exporting.formatOptions.print.saveImageOptions.imageSettings.imageQuality = 1;
chart.exporting.formatOptions.print.saveImageOptions.imageSettings.printMethod = "pdf";
chart.exporting.formatOptions.svg.keepGenerator = false;
chart.exporting.formatOptions.svg.keepSize = true;
chart.exporting.formatOptions.svg.scymbols = true;
chart.exporting.formatOptions.xlsx.columnGroups = true;
chart.exporting.formatOptions.xlsx.columnTitles = true;
chart.exporting.formatOptions.xlsx.creator = "";
chart.exporting.formatOptions.xlsx.keepGenerator = false;
chart.exporting.formatOptions.xlsx.keepSize = true;
chart.exporting.formatOptions.xml.pageSize = "A4";
// 渲染图表
chart.exporting.formatOptions.menu.hidden = true;
chart.exporting.formatOptions.menu.show = true;
chart.exporting.formatOptions.menu.exportingFormats.columnGroups = false;
chart.exporting.formatOptions.menu.exportingFormats.columnTitles = false;
chart.exporting.formatOptions.menu.exportingFormats.creator = false;
chart.exporting.formatOptions.menu.exportingFormats.customFont = false;
chart.exporting.formatOptions.menu.exportingFormats.embedImages = false;
chart.exporting.formatOptions.menu.exportingFormats.error = false;
chart.exporting.formatOptions.menu.exportingFormats.filePrefix = false;
chart.exporting.formatOptions.menu.exportingFormats.filePrefixFont = false;
chart.exporting.formatOptions.menu.exportingFormats.imageSettings = false;
chart.exporting.formatOptions.menu.exportingFormats.keepGenerator = false;
chart.exporting.formatOptions.menu.exportingFormats.keepSize = false;
chart.exporting.formatOptions.menu.exportingFormats.margins = false;
chart.exporting.formatOptions.menu.exportingFormats.mirror = false;
chart.exporting.formatOptions.menu.exportingFormats.narrowingResolution = false;
chart.exporting.formatOptions.menu.exportingFormats.pageOrientation = false;
chart.exporting.formatOptions.menu.exportingFormats.pageScale = false;
chart.exporting.formatOptions.menu.exportingFormats.pageSize = false;
chart.exporting.formatOptions.menu.exportingFormats.saveImageOptions = false;
chart.exporting.formatOptions.menu.exportingFormats.scymbols = false;
chart.exporting.formatOptions.menu.exportingFormats.tableLayout = false;
chart.exporting.formatOptions.menu.exportingFormats.useWebFonts = false;
// 更新图表
chart.validateData();
上面的代码演示了如何使用AmCharts创建一个柱状图,并将每个柱子的边框颜色设置为红色。请注意,这只是示例代码,并且具体的实现可能因AmCharts版本和您的项目配置而有所不同。
在这个例子中,我们使用了AmCharts的柱状图系列(ColumnSeries)来显示数据。通过设置系列的columns.template.stroke
属性为红色,我们将每个柱子的边框颜色更改为红色。您可以根据需要将此颜色更改为任何其他颜色。
希望这个示例能够帮助您更好地理解如何在AmCharts中更改每个数据的边框颜色。请记住,具体的实现可能因您的项目和所使用的AmCharts版本而有所不同,所以请根据实际情况参考AmCharts的官方文档。
领取专属 10元无门槛券
手把手带您无忧上云