Chart.js每个点的自定义图像
Chart.js Custom Image for Each Point
我使用的是Chart.js,我正在为散点图上的每个点寻找自定义图像的帮助。我尝试过使用javascript图像数组,但它不起作用。我是画布和html5的新手。
我希望每个点都是用户的小个人资料图片,而不是圆形。
举个例子将不胜感激。
我目前有:
var ctx = document.getElementById("member-graph-scatter");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Miles / Feet',
data: [<?php echo $member_scatter_graph_miles_climbing; ?>],
backgroundColor: "rgba(255,99,132,0.6)",
borderColor: "rgba(75,192,192,1)",
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Feet Climbed (ft)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Miles Ridden (miles)'
},
type: 'linear',
position: 'bottom'
}]
},
showLines: false
}
});
这个图运行良好,但是,这些点显然是默认的圆。
根据我需要使用的文件:
"如果选项是图像,则使用drawImage.image,Array在画布上绘制该图像",可在以下位置查看:http://www.chartjs.org/docs/
var yourImage = new Image(),
yourImage.src ='http://your.site.com/your_image.png';
data = {
labels: ['one', 'two', 'three'],
datasets: [{
label: 'Label1',
pointRadius: [0,0,0,0,20],
pointHoverRadius: [0,0,0,0,20],
pointHitRadius: [0,0,0,0,20],
pointStyle: ['', '', '', '', yourImage],
data: [1,2,3]
}, {
label: 'label2',
pointRadius: [0,0,0,0,20],
pointHoverRadius: [0,0,0,0,20],
pointHitRadius: [0,0,0,0,20],
pointStyle: ['', '', '', '', yourImage],
data: [1,2,3]
}]
这里有一个更完整的例子。它显示了如何为单个点或所有点设置样式。
var yourImage = new Image()
yourImage.src ='http://your.site.com/your_image.png';
var imageData = {
labels: ['one', 'two', 'three', 'four'],
datasets: [{
label: 'Label1',
pointRadius: [10, 0, 10, 10],
pointHoverRadius: 20,
pointHitRadius: 20,
pointStyle: ['rect', yourImage, 'triangle', 'circle'],
pointBackgroundColor: "rgba(0,191,255)",
data: [1.5, 2.3, 3, 2.5]
}]
}
window.onload = function() {
var lineID = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(lineID, {
type: 'line',
data: imageData,
options: {}
});
我试图在Vue应用程序(使用Webpack构建)中实现这一点,并获得了以下解决方案。导入图像并创建图像元素,如下所示:
import myIcon from '@/assets/my-icon.svg'
const chartPoint = new Image()
chartPoint.src = myIcon
然后在您的chart.js数据集选项中(根据您的需要进行调整):
{
data: data,
pointRadius: 10,
borderWidth: 0,
pointStyle: chartPoint,
...
}
drawImage()采用各种类型的图像元素,但最简单的只是一个HTMLImageElement,您可以在标记中或使用Javascript创建它,如上所述。
相关文章:
- OpenLayers-自定义图像在一层上的马赛克
- 如何使用JS捕捉带有垂直线的自定义图像光标
- 在画布中创建自定义图像对象
- 可以用我自己的自定义图像替换光标
- 如何在javascript中使画布显示自定义图像作为背景
- 如何在这里的地图中添加自定义图像标记
- Google Plus通过javascript共享,带有自定义图像
- JS--自定义图像属性
- 嵌入视频,将黑色背景更改为自定义图像或第一个视频场景
- “未捕获的类型错误:无法读取未定义的属性'嵌入'”在 pdfMake pdf 引擎中使用自定义图像时
- 自定义图像作为单选按钮
- 如何用自定义图像替换脸书按钮
- 谷歌地图不适用于自定义图像标记
- 具有自定义图像位置的全屏背景幻灯片(每张幻灯片)
- 在谷歌地图中按类型显示自定义图像标记图标
- 传单自定义图像坐标
- 在Highcharts中自定义图像和不同的文本
- 使用jQuery将光标更改为自定义图像
- 将自定义图像添加到Ext.tab.Panel上的项目中
- 带有传单的自定义图像标记不显示图像