javascript - 渲染Canvasjs图表后更改div边框

我正在使用Canvasjs图表（http://canvasjs.com），我想在图表渲染后将div边框的颜色更改为红色

<div id="chartContainer" style="height:300px; width:90%; font-family:BMitra; text-align:center; border: 1px solid black;"></div>

<script>
    function charting() {
        var dataPo = [];
        $.getJSON("<?=base_url();?>report/messages/create_report2", function(data) {
            for( var i = 0; i < data.length; i++) {
                dataPo.push({ label: data[i].label, y: data[i].y });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                //backgroundColor: "#D2FEFF",
                backgroundColor: "transparent",
                theme: "theme3",
                animationEnabled: true,
                title:{
                    text:"my title",
                    fontFamily: "BYekan"
                },
                axisY:{
                    labelFontFamily: "BYekan"
                },
                axisX:{
                  labelFontFamily: "BYekan"
                },
                toolTip:{
                    fontSize: 19,
                    fontFamily: "BYekan",
                },
                data: [{
                    type: "column",
                    dataPoints : dataPo,
                }]
            });
            chart.render();
        }
</script>

最佳答案

首先，您的代码缺少一些方括号。

然后，根据this docs的说法，CanvasJS不为render()函数提供任何回调句柄，但是他们说，由于它非常快，因此在它之后立即调用函数可能不会有任何问题。

这意味着您可以像这样通过jQuery调用更改边框颜色

$("yourDivSelector").css("border-color", "red");

并将其放在chart.render();之后。您的最终代码应如下所示

<script>
    function charting() {
        var dataPo = [];
        $.getJSON("<?=base_url();?>report/messages/create_report2", function(data) {
            for( var i = 0; i < data.length; i++) {
                dataPo.push({ label: data[i].label, y: data[i].y });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                //backgroundColor: "#D2FEFF",
                backgroundColor: "transparent",
                theme: "theme3",
                animationEnabled: true,
                title:{
                    text:"my title",
                    fontFamily: "BYekan"
                },
                axisY:{
                    labelFontFamily: "BYekan"
                },
                axisX:{
                  labelFontFamily: "BYekan"
                },
                toolTip:{
                    fontSize: 19,
                    fontFamily: "BYekan",
                },
                data: [{
                    type: "column",
                    dataPoints : dataPo,
                }]
            });
            chart.render();
            $("yourDivSelector").css("border-color", "red");
        });
    }
</script>