渲染 Canvasjs 图表后更改 div 边框

Question

我使用 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>

Answer 1

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

然后，根据这个文档，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>