英文:
Displaying gif on tip of line chart
问题
我正在尝试在我的不断更新的图表线的顶部显示gif。我目前正在使用chartjs,并想知道是否可以使用该库来实现这种效果查看这个图片。
我已经创建了一个CodePen示例,链接在这里:https://codepen.io/kacpero21/pen/vYVKYJy
Pen中的代码...
感谢帮助。
英文:
I am trying to display gif on tip of the line in my chart that is updating constantly. I am currently using chartjs and wanted to ask if thats even possible with that lib or should I choose something else to achieve that effect LOOK THIS IMAGE
I've created code pen, with that example link is there <https://codepen.io/kacpero21/pen/vYVKYJy>
Code in pen...
Thanks for help
答案1
得分: 2
以下是您要翻译的内容:
- 在JS中,使用GIF/PNG/JPG定义一个常规图像,例如:
var myImg = new image(); myImg.src = "path.to.image/image.png";
。 datasets: {[ pointRadius: [10], pointStyle:[myImg] ]}
必须以具有点半径和图像的一维数组开始。- 在每个计时器循环中,在数组的开头插入一个新元素,其值为零/空值:
datasets[0].pointRadius.unshift(0); datasets[0].pointStyle.unshift("");
搜索 snippet 中的 NEW
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
// 用于示例目的
const x = new Date().getTime();
let multiplier = 0;
function getRandomIntInclusive(min, max) {
const elapsed = new Date().getTime() - x;
const InvFact = 0.0000625;
const value = Math.pow(Math.E, elapsed * InvFact);
multiplier = value;
return {
value: value,
elapsed: elapsed
};
}
// NEW, example image
var myImg = new Image();
myImg.src = "https://picsum.photos/id/20/15";
// 创建初始空图表
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
type: "line",
data: {
labels: [0, 2, 4],
datasets: [
{
// NEW, a point to show an image
pointRadius: [10],
pointStyle: [myImg],
data: [1],
borderWidth: 1,
borderColor: "#00c0ef",
label: "liveCount"
}
]
},
options: {
animation: {
duration: 1,
easing: "linear"
},
responsive: true,
title: {
display: true,
text: multiplier
},
legend: {
display: false
},
maintainAspectRatio: false,
elements: {
line: {
tension: 0
}
},
scales: {
x: {
display: true
},
y: {
min: 100,
max: 40
},
yAxes: [
{
type: "linear",
ticks: {
max: 5,
min: 1,
maxTicksLimit: 10
},
gridLines: {
display: false
}
}
],
xAxes: [
{
max: 5,
color: "rgba(255, 255, 255,1)",
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 1,
min: 0,
max: 5,
callback: function (value, index, values) {
return Math.floor(value) + "s";
}
}
}
]
}
}
});
// 此帖子ID驱动示例数据
var postId = 1;
var arySize = 0;
// 获取新数据的逻辑
var getData = function () {
var tick = getRandomIntInclusive();
// NEW
// 在前面插入元素以扩展数组
myChart.data.datasets[0].pointRadius.unshift(0);
myChart.data.datasets[0].pointStyle.unshift("");
//
myChart.data.labels.push(tick.elapsed / 1000);
myChart.data.datasets[0].data.push(tick.value);
myChart.options.title.text = multiplier.toFixed(2);
myChart.options.scales.yAxes[0].ticks.max = multiplier + 2;
// 重新渲染图表
myChart.update();
};
// 每3秒获取新数据
setInterval(getData, 1000);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" crossorigin="anonymous"></script>
<div style="width: 100%; min-height: 400px">
<canvas id="mycanvas"></canvas>
</div>
<!-- end snippet -->
英文:
Solution:
- in JS define a regular image with the GIF/PNG/JPG, e.g.
var myImg = new image(); myImg.src = "path.to.image/image.png"
. datasets: {[ pointRadius: [10], pointStyle:[myImg] ]}
must start as 1D arrays with a point radius and the image.- each timer loop, insert a new element at the beginning of the arrays with zero/empty values:
datasets[0].pointRadius.unshift(0); datasets[0].pointStyle.unshift("");
Search for NEW in the snippet
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
// used for example purposes
const x = new Date().getTime();
let multiplier = 0;
function getRandomIntInclusive(min, max) {
const elapsed = new Date().getTime() - x;
const InvFact = 0.0000625;
const value = Math.pow(Math.E, elapsed * InvFact);
multiplier = value;
return {
value: value,
elapsed: elapsed
};
}
// NEW, example image
var myImg = new Image();
myImg.src = "https://picsum.photos/id/20/15";
// create initial empty chart
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
type: "line",
data: {
labels: [0, 2, 4],
datasets: [
{
// NEW, a point to show an image
pointRadius: [10],
pointStyle: [myImg],
data: [1],
borderWidth: 1,
borderColor: "#00c0ef",
label: "liveCount"
}
]
},
options: {
animation: {
duration: 1,
easing: "linear"
},
responsive: true,
title: {
display: true,
text: multiplier
},
legend: {
display: false
},
maintainAspectRatio: false,
elements: {
line: {
tension: 0
}
},
scales: {
x: {
display: true
},
y: {
min: 100,
max: 40
},
yAxes: [
{
type: "linear",
ticks: {
max: 5,
min: 1,
maxTicksLimit: 10
},
gridLines: {
display: false
}
}
],
xAxes: [
{
max: 5,
color: "rgba(255, 255, 255,1)",
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 1,
min: 0,
max: 5,
callback: function (value, index, values) {
return Math.floor(value) + "s";
}
}
}
]
}
}
});
// this post id drives the example data
var postId = 1;
var arySize = 0;
// logic to get new data
var getData = function () {
var tick = getRandomIntInclusive();
// NEW
// Extend the arrays by inserting elements in front
myChart.data.datasets[0].pointRadius.unshift(0);
myChart.data.datasets[0].pointStyle.unshift("");
//
myChart.data.labels.push(tick.elapsed / 1000);
myChart.data.datasets[0].data.push(tick.value);
myChart.options.title.text = multiplier.toFixed(2);
myChart.options.scales.yAxes[0].ticks.max = multiplier + 2;
// re-render the chart
myChart.update();
};
// get new data every 3 seconds
setInterval(getData, 1000);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" crossorigin="anonymous"></script>
<div style="width: 100%; min-height: 400px">
<canvas id="mycanvas"></canvas>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论