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

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

然后，根据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>

渲染Canvasjs图表后更改div边框

1 个答案: