Question

CHART JS

我正在使用图表js绘制图表，我的要求是在y轴的日期基础上绘制图表上的图标。我可以绘制图表，但我想在该图表上绘制多个图标而不是一个图标。下面是html中的工作代码和图表图片链接**我已经尝试了堆栈溢出链接它无法正常工作can anybody help me out on this 编辑正在运行的新代码

＆＃13;

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line Chart Test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <script language="JavaScript">
  var img = new Image();
  img.onload = function () {
  var size = 20;
  
  
    Chart.types.Line.extend({
    name: "LineAlt",
    draw: function() {
      Chart.types.Line.prototype.draw.apply(this, arguments);

      var scale = this.scale;
      [
      	{ x: 1, y: 50 }, 
		{ x: 1, y: 45 }, 
		{ x: 1, y: 40 }, 
		{ x: 1, y: 35 }, 
		{ x: 1, y: 30 }, 
		{ x: 1, y: 25 }, 
		{ x: 1, y: 20 }, 
		{ x: 1, y: 15 }, 
		{ x: 1, y: 10 }, 
		{ x: 2, y: 40 },
		{ x: 2, y: 40 },
		{ x: 3, y: 30 },
        { x: 4, y: 10 },
		{ x: 4, y: 15 }
      ].forEach(function(p) {
        ctx.drawImage(img, scale.calculateX(p.x) - size / 2, scale.calculateY(p.y) - size / 2, size, size);
      })
    }
  });
  
    var data = {
        labels: ["Dec", "Jan", "Feb", "March", "April", "May", "June"],
        datasets: [
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [25, 45, 35, 14, 81, 22, 85]
            },{
                label: "Prime and Fibonacci",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [2, 3, 5, 7, 11, 13, 17]
            }
        ]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = { };
    var lineChart = new Chart(ctx).LineAlt(data,  options);
  }
  
  img.src = 'D:/WorkSpace/angchart/WebContent/images/MD.png';
  
  </script>
</head>
<body>
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>
</html>

＆＃13;

所以任何机构都可以帮助我解决如何在该图表或代码中添加多个图像

将图标添加到chart.js中的特定坐标

CHART JS

0 个答案: