Question

简单设置：我有一个RoR应用程序和一个ChartJS Line Diagramm。我想在特定的地方添加图片，但也要添加文字。在RoR应用程序的进度中，用户的答案将在一段时间后显示出来。之后会显示两个人的答案，他们更接近平均值。在我的情况下，我只需要知道如何在里面呈现图片。

Picture What it should look like

这是我的实际代码：

var points = [];
    
       var data = {
        datasets: [{
            label: 'Antworten',
            data: points,
            radius: 6,
            borderColor: "#000000",
            borderWidth: 2,
            backgroundColor: "#FF0000"
        },
        {
            label: "",
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(0,0,0,1)",
            borderColor: "rgba(0,0,0,1)",
            borderCapStyle: 'butt',
            borderDash: [0],
            borderDashOffset: 0.0,
            showLine: true,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(0,0,0,1)",
            pointBackgroundColor: "rgba(1,0,0,1)",
            pointBorderWidth: 8,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(0,0,0,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointStyle: "circle",
            pointHitRadius: 10,
            data: [{
                x: 0,
                y: 0
            },{
                x: 100,
                y: 0
            }],
            borderColor: "#000000",
            borderWidth: 5,
            backgroundColor: "#FF0000"
        }
        ]
    };
    
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx, {
                type: 'line',
                data,
                options: {
                    legend: {
                        display: false
                    },
                    showLines: false,
                    scales: {
                        xAxes: [{
                            type: 'linear',
                            gridLines: {
                                display: false
                            },
                            position: 'bottom',
                            ticks: {
                                max: 100,
                                min: 0,
                                stepSize: 10
                            }
                        }],
                        yAxes: [{
                            display: false,
                            ticks: {
                                max: 1,
                                min: 0,
                                stepSize: 1
                            }
                        }]
                    }
                }
            });
        };

Answer 1

找到答案：在这里我的解决方案

var user_a = new Image();
user_a.src = 'http://i.imgur.com/fwhrCBs.png';

var data = {
    datasets: [
    {
        label: 'Spieler 1',
        data: user_a_answer,
        radius: 1,
        borderColor: "#000000",
        borderWidth: 2,
        pointStyle: user_a,
    }]

图表JS线插入图片

1 个答案: