ZingChart大数据Canvas渲染失败求助及代码排查

问题概述 #

使用ZingChart绘制20万条数据时，DIV（SVG）渲染导致页面卡顿。按照官方性能文档配置Canvas渲染未生效，同时需解决2022-10-10 23:24:03格式时间数组的正确传递问题。

核心问题分析 #

从提供的代码中可定位几个关键错误：

1. 渲染目标ID不匹配：动态创建的Canvas元素ID为lineChart_f，但zingchart.render中指定的id为lineChart_cob_f，导致Canvas渲染配置无法绑定到正确元素。
2. Series数据赋值语法错误：更新尝试中的代码存在多处语法错误（如values.[frequency_array_ff]、多余的闭合括号），导致数据无法正确传递。
3. 时间格式未明确指定：Scale-x的日期转换未配置匹配YYYY-MM-DD HH:mm:ss的解析格式，可能导致时间轴渲染异常。

修复方案 #

1. 修正Canvas渲染绑定 #

确保动态创建的Canvas ID与渲染配置中的id完全一致：

// 动态创建Canvas时的ID
$('#canvas_div_f').append(
    '<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
// 渲染配置中的ID对应修改
zingchart.render({
    id: 'lineChart_f', // 与Canvas ID一致
    data: configTimeAndAngle,
    height: "100%",
    width: "100%",
    output: "canvas" // 确保启用Canvas渲染
});

2. 正确传递Series数据 #

Series的values需直接赋值一维数组（对应x轴的时间标签索引），避免错误的语法写法：

// 正确的赋值方式
configTimeAndAngle.series[0].values = frequency_array_ff;
configTimeAndAngle.series[1].values = frequency_array_fh;

无需使用push包裹数组，直接将数据数组赋值给values即可。

3. 时间数组的正确配置 #

针对2022-10-10 23:24:03格式的时间数组，需在scale-x的transform中明确指定日期解析格式：

'scale-x': {
    zooming: true,
    labels: timeArray,
    'max-items':8,
    transform: {
        type: 'date',
        all: "%Y-%m-%d %H:%i:%s" // 匹配时间格式
    },
    item: {
        'font-size':10
    }
},

该配置确保ZingChart正确解析时间字符串，生成对应的时间轴。

完整修正代码 #

function chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {
    // 关闭ZingChart调试相关配置，提升性能
    zingchart.DEV.SORTTOKENS = 0;
    zingchart.DEV.PLOTSTATS = 0;
    zingchart.DEV.RESOURCES = 0;
    zingchart.DEV.KEEPSOURCE = 0;
    zingchart.DEV.COPYDATA = 0;
    zingchart.DEV.MEDIARULES = 0;
    zingchart.SYNTAX = 'dashed';

    $('#lineChart_f').remove();
    $('#canvas_div_f').append(
        '<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
    );

    let configTimeAndAngle = {
        "type": "line",
        plot: {
            mode: 'fast', // 启用快速绘制模式
            'hint-ts': true
        },
        legend: {
            layout: "1x2",
            x: "35%",
            y: "6%",
        },
        "preview":{ 
            "live":true
        },
        'scale-x': {
            zooming: true,
            labels: timeArray,
            'max-items':8,
            transform: {
                type: 'date',
                all: "%Y-%m-%d %H:%i:%s" // 指定时间解析格式
            },
            item: {
                'font-size':10
            }
        },
        'scale-y': {
            'auto-fit': true,
            guide: {
                'line-style': "solid"
            },
            item: {
                'font-size':10
            }
        },
        tooltip: {
            text: 'Time : %kt (X) Freq : %v (Y).',
            alpha: 0.9,
            backgroundColor: '#F44336',
            borderColor: '#B71C1C',
            borderRadius: 2,
            borderWidth: 1,
            padding: '5 10'
        },
        gui: {
            behaviors: [
                { id: 'ViewDataTable', enabled: 'none' },
                { id: 'ViewSource', enabled: 'none' },
                { id: 'CrosshairHide', enabled: 'all' }
            ]
        },
        "series": [
            {
                "values": frequency_array_ff,
                'line-color': "#3366ff",
                'background-color': "#3366ff",
                text: "Centeral Frequency"
            },
            {
                "values": frequency_array_fh,
                'line-color': "#00cc99",
                'background-color': "#00cc99",
                text: "Frequency Hopping"
            }
        ]
    };

    zingchart.render({
        id: 'lineChart_f', // 匹配Canvas元素ID
        data: configTimeAndAngle,
        height: "100%",
        width: "100%",
        output: "canvas" // 确保使用Canvas渲染
    });
}

额外性能建议 #

• 确保frequency_array_ff和frequency_array_fh为纯数值数组，避免嵌套或非数值类型。
• 若数据量持续增大，可考虑启用ZingChart的stream模式进行增量渲染，进一步降低内存占用。

内容的提问来源于stack exchange，提问作者decent boy