渲染 Canvasjs 图表后更改 div 边框答案

【问题标题】：change div border after render Canvasjs chart渲染 Canvasjs 图表后更改 div 边框
【发布时间】：2017-05-11 11:27:59
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html canvasjs

【解决方案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>

【讨论】：

您是否已将yourDivSelector 更改为您要定位的div 的实际名称？