是否可以将特定图像/图标添加到折线图中的特定坐标?这些点可能与线点不同。我搜索了很多,但我找不到任何比定制工具提示内容样式更进一步的东西。我想在一些点上添加星星或类似的形状来表示特殊事件。
jk9hmnmh1#
您可以扩展图表(覆盖draw方法,以在原始draw函数之后绘制图标)来完成此操作
draw
预览
脚本
var img = new Image(); img.onload = function() { var size = 48; Chart.types.Line.extend({ name: "LineAlt", draw: function() { Chart.types.Line.prototype.draw.apply(this, arguments); var scale = this.scale; [ { x: 1.5, y: 50 }, { x: 4, y: 10 } ].forEach(function(p) { ctx.drawImage(img, scale.calculateX(p.x) - size / 2, scale.calculateY(p.y) - size / 2, size, size); }) } }); ... var myLineChart = new Chart(ctx).LineAlt(data, { scaleBeginAtZero: true }); } img.src = "<< image url >>";
图片来源:Everaldo Coelho和YellowIcon LGPL(http://www.gnu.org/licenses/lgpl.html),via Wikimedia Commons
小提琴-http://jsfiddle.net/rhzzpat0/
hi3rlvi22#
您可以创建一个自定义插件。您可以根据图表和数据调整x和y坐标。请注意,本Map像不能使用,您需要有图像托管或您可以使用base-64 url。
const CustomImage = { id: 'customImage', afterDraw(chart, args, options) { const { ctx, chartArea: { left, top, width, height } } = chart ctx.save() const img = new Image() img.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAXCAYAAAAcP/9qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALQSURBVHgBxVY9TFNRFP4oFfkRUyo1iAlp0hAkYYAEN0AX+VlMGQgjdDDByZi4YDSGwbipqKOxdSCxU4VFhUEENhBJrNEoldLEplFoq21phdbrOc+UtH33PZsYy5fcpL33vfud795zvvMghBihERGlwwZzlvEPAFaUFlEmFjgAGPUWM/4IYpOLSD714lc0RSOJivZGHKJRM9qJmVQQS6tefAoEEd9J4kh1FZqbGtHffRoDXZ16W0NTcfTyDOKuZdRe6kaVvQ1Gax0MpirsrhEJBZNwrWDBJtDyYBgtPW2oJdIYka9vBvFsaRlrHz5j/MIwOk7ZiicOO9zIkLpjzmGFLBeJxysIj7r3/xutZhx/OYZyCiwXb977cOvhEzgG+6TqDYUT3ydmFVKLZ1RFykefS8pI+8PYdrhVG3e02jA5fhFOz6xyFbrEvDEfYd2d85Dh26BLOv9z3qecRCFO1Jsx1NuF+1PT+sSs9s99mlUP7tHd8tACByzDUF8P1klxaCuiTcyJUzMiz8bUKx/0wKoFXZEMfMeLr73axKyIy0WGXR21++/7I9L5Bjry0FZYm/hfoaVYhjxirtX0pjxqY0G5yKB1WqyWzUWTuOKsTXEpGQ6fkRtBFlzHZQXll8Xi6ju0t9q0iTmx4neXpC9XUlDlOqrZ4WRgS6VLUDmYQb25SbFLGbTqmwNi7y4El9C9qRk47L2qNVVymckmd+i4f0zMqR7mGj9641zeXJmpEvWeEZXLMenVSRc1jE4MUNNQQdap9za2xRfrTRFqvy1S8+uq9a92pwjgivhouS4Cc2/z1mKJpHjkeSEGxq4J9/MFza8B3X6coO7EbTHjjyqtkMslTbVqIJXVlA9OSxizXq9ijZy1nL3cofq7qC2S0uamk1pbo6gPAe7DWQNhOy0sLaUfJ5JosJgpiL+XXdHE/wOcXPMoPaZZsYl+2FG6D74oDddvkqP2kRLQOxsAAAAASUVORK5CYII=' const imgWidth = 30 const imgHeight = 22.5 const imgX = 350 const imgY = 110 ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight) ctx.restore() } } export default CustomImage
2条答案
按热度按时间jk9hmnmh1#
您可以扩展图表(覆盖
draw
方法,以在原始draw
函数之后绘制图标)来完成此操作预览
脚本
图片来源:Everaldo Coelho和YellowIcon LGPL(http://www.gnu.org/licenses/lgpl.html),via Wikimedia Commons
小提琴-http://jsfiddle.net/rhzzpat0/
hi3rlvi22#
您可以创建一个自定义插件。您可以根据图表和数据调整x和y坐标。请注意,本Map像不能使用,您需要有图像托管或您可以使用base-64 url。