Question

我使用ChartJs绘制图表并尝试更改pointStyle。我想使用svg格式的动画来自定义pointStyle，但它在图表上没有动画效果。我不知道是否有可能将svg图像绘制到canvs上，请帮助我。非常感谢你这是我的代码：[LinkCodepen] [1]

[1]: https://codepen.io/vungho/project/editor/XwKwGx/

<!DOCTYPE html>
<html>
<head>
<title>Chart JS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>   
</head>
<body>
<img src="ripple.svg">
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>
<br>
<br>

<script>
    var myImage = new Image();
    myImage.src = "ripple.svg"
    var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var config = {
        type: 'line',
        data: {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                            label: "My First dataset",
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderColor: 'rgb(255, 99, 132)',
                            pointStyle : [myImage, myImage, '', '', '', '', myImage, myImage],
                            data: [
                                20, 36, 46,  66, 87, 45, 49
                            ],
                            fill: false,
                        }, {
                            label: "My Second dataset",
                            fill: false,
                            backgroundColor: 'rgb(54, 162, 235)',
                            borderColor:'rgb(54, 162, 235)',
                            pointStyle : ['', myImage, myImage, '', '', myImage, '', myImage],
                            data: [
                                45, 56, 65, 78, 54, 32, 69
                            ],
                        }
                    ]
        },
        options: {
            responsive: true,
            title:{
                display:true,
                text:'Chart.js Line Chart'
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }]
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };
</script>
</body>
</html>

ripple.svg是： <?xml version="1.0" encoding="utf-8"?><svg width='54px' height='54px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ripple"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g> <animate attributeName="opacity" dur="2s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#e60649" fill="none" stroke-width="23" stroke-linecap="round"><animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g><g><animate attributeName="opacity" dur="2s" repeatCount="indefinite" begin="1s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#fa64a3" fill="none" stroke-width="23" stroke-linecap="round"><animate attributeName="r" dur="2s" repeatCount="indefinite" begin="1s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g></svg>

自定义pointStyle与动画图像SVG文件和图表JS

0 个答案: