将独特的图像显示为标记，可以为您的图表增添独特的视觉效果，使数据可视化更具吸引力和信息量。在本期《JS 图表技巧》中，我们将指导您使用我们的JavaScript 图表库，为象限图中的每个数据点使用自定义图像标记。
问题：如何将自定义图像显示为象限中的标记？ 最近，一位用户向我们的支持团队提出了一个问题，简而言之，可以归结为以下几点：“我可以将象限图中的标记更改为自定义图像吗？”我们认识到需要实现如下所示的效果：
草图
所以，答案是肯定的，现在我们将向您展示具体方法。如果您有类似的需求，请继续关注！
解决方案：添加图像作为象限数据点的标记 概述 使用 AnyChart创建 JS 象限图时，数据默认以标记系列的形式呈现。要使这些标记显示为自定义图像，请使用fill()方法并指定图像源 URL。
要为每个数据点显示唯一的图像，请在数据集中添加包含图像 URL 的自定义属性。通过将自定义函数传递到fill()方法中，您可以动态提取并应用系列标记的图像 URL。
详细 现在让我们通过一个简单的例子来看一下这个解决方案的具体内容。
首先，我们创建一个基本的象限图。以下 JavaScript 代码足以生成这样的可视化效果，数据以对象数组的形式传入：
anychart.onDocumentReady(function () { // create data var data = [ {x: 4, value: 42}, {x: 13, value: 59}, {x: 25, value: 68}, {x: 25, value: 63}, {x: 44, value: 54}, {x: 55, value: 58}, {x: 56, value: 46}, {x: 60, value: 54}, {x: 72, value: 73} ];
// create a chart var chart = anychart.quadrant(data);
// set the chart title chart.title("Quadrant Chart with Images as Markers");
// set the container id chart.container("container");
// initiate drawing the chart chart.draw(); }); 其次，对于每个数据点，您可以通过添加自定义属性来指定用作标记的图像的 URL。在此示例中，我们将以下方法添加到最后一个数据点：
{x: 72, value: 73, image: ""} 第三，我们通过使用带有自定义函数的方法自定义该系列fill()，以动态提取并应用每个标记的图像 URL。在下面的示例中，该函数设置为数据点的正常状态。它将数据集中的图像 URL 应用于每个数据点，如果 URL 不存在，则应用默认图像 URL：
series.normal() .fill(function(){ return { src: this.getData("image") ? this.getData("image") : "" }; }); 第四，我们可以自定义标记的外观，以确保图像按预期显示。例如，我们可以调整大小和填充模式，以及配置标记在正常状态下、悬停和选中状态下的外观：
// customize series appearance in the normal state series.normal() .size(15) .fill(function(){ return { src: this.getData("image") ? this.getData("image") : "", mode: "fit" }; });
// customize series appearance in the hovered state series.hovered() .size(20) .fill(function(){ return { src: this.getData("image") ? this.getData("image") : "", mode: "fit" }; });
// customize series appearance in the selected state series.selected() .size(25) .fill(function(){ return { src: this.getData("image") ? this.getData("image") : "", mode: "fit" }; }); 就是这样！我们的象限图现在使用图像作为标记。
如果您有类似的情况，您可能更喜欢更简洁的版本来实现相同的结果：
// define fill logic function customFill(point) { return { src: this.getData("image") || "", mode: "fit" }; };
// apply fill logic to different states series.normal().size(15).fill(customFill); series.hovered().size(20).fill(customFill); series.selected().size(25).fill(customFill); 示例 查看以图像为标记的 JavaScript 象限图示例，并随意进一步试验其代码和可视化效果：
带图像标记的象限图 | AnyChart Playground 结果
进一步学习 要了解更多信息，请参阅我们的 JavaScript 图表文档：
象限图 — 基本图表 | AnyChart JS 文档 填充设置 — 图形 | AnyChart JS 文档 API 参考：
AnyChart Core 散点图系列标记填充 | AnyChart JS API 参考 图形矢量图像填充模式 | AnyChart JS API 参考 总结 现在，您已经知道如何在象限图中添加自定义图像标记了。想要了解更多技巧和窍门，请继续关注我们的JavaScript 图表技巧系列。如果您对我们的JavaScript 图表库中的任何图表类型或功能有任何疑问，欢迎随时联系我们的支持团队。祝您数据可视化愉快！作者www.mjsyxx.com
