JavaScript 新增对象属性时值带双引号，导致CanvasJS图表初始化异常

为CanvasJS图表对象新增title属性时，属性值被作为带双引号的普通字符串传入，无法解析为可用于初始化的对象结构，导致图表渲染结果与预期不符。

• 预期效果：图表标题正常按配置渲染
• 实际错误效果：传入的字符串内容被直接整体渲染为标题

可直接运行的复现代码如下：

JavaScript 业务逻辑 #

var chart;
function myFunction(incoming_data) {
    var lcl = JSON.parse(JSON.stringify(incoming_data));
    var headertxt = lcl.title_dynamic;
    console.log(headertxt);
    var chartCfg = {
        zoomEnabled: true,
        axisX: {
            title: "chart updates every 2 secs",
            crosshair: {
                enabled: true,
                snapToDataPoint: true
            }
        },
        axisY: {
            crosshair: {
                enabled: true,
                snapToDataPoint: true,
                valueFormatString: "#,##0"
            }
        },
        toolTip: {
            shared: true
        },
        legend: {
            dockInsidePlotArea: true,
            verticalAlign: "top",
            horizontalAlign: "right"
        }
    };
    chart = new CanvasJS.Chart("chart-container", chartCfg);
    chart.options.title = headertxt;
    console.log(chart.options);
    chart.render();
}
var json_val = {"title_dynamic":"{text:\\"Header Tay\"}"};
myFunction(json_val);

页面结构依赖 #

<div id="chart-container" style="height: 300px; width: 100%;">
</div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

说明：以上代码段为可直接运行的复现片段，加载后即可验证异常现象

内容的提问来源于stack exchange，提问作者Taylan Yuksel