在线图顶部显示 GIF。

huangapple go评论65阅读模式
英文:

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 = &quot;path.to.image/image.png&quot;.
  • 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(&quot;&quot;);

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 = &quot;https://picsum.photos/id/20/15&quot;;

// create initial empty chart
var ctx_live = document.getElementById(&quot;mycanvas&quot;);
var myChart = new Chart(ctx_live, {
  type: &quot;line&quot;,
  data: {
    labels: [0, 2, 4],
    datasets: [
      {
        // NEW, a point to show an image
        pointRadius: [10],
        pointStyle: [myImg],

        data: [1],
        borderWidth: 1,
        borderColor: &quot;#00c0ef&quot;,
        label: &quot;liveCount&quot;
      }
    ]
  },
  options: {
    animation: {
      duration: 1,
      easing: &quot;linear&quot;
    },
    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: &quot;linear&quot;,

          ticks: {
            max: 5,
            min: 1,
            maxTicksLimit: 10
          },
          gridLines: {
            display: false
          }
        }
      ],
      xAxes: [
        {
          max: 5,
          color: &quot;rgba(255, 255, 255,1)&quot;,
          gridLines: {
            display: false
          },
          ticks: {
            maxTicksLimit: 1,
            min: 0,
            max: 5,
            callback: function (value, index, values) {
              return Math.floor(value) + &quot;s&quot;;
            }
          }
        }
      ]
    }
  }
});

// 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(&quot;&quot;);
  //

  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 -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

&lt;div style=&quot;width: 100%; min-height: 400px&quot;&gt;
  &lt;canvas id=&quot;mycanvas&quot;&gt;&lt;/canvas&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 18:32:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76034205.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定