zing 图表未在 Canvas 中呈现答案

【问题标题】：zing chart are not being render in Canvaszing 图表未在 Canvas 中呈现
【发布时间】：2022-10-13 02:45:39
【问题描述】：

我正在尝试在 zing Chart 上绘制一些重要数据。 Zing 图表通常绘制在 div 内，但就我而言，在 zing 图表 div-tag 内加载 200k 点后，我的页面变得很长。在文档中，它说要在 Canvas 中加载大数据。在zing图表的性能documentation；在文件的末尾有渲染类型，它说要加载到画布中，但它不起作用。根据文档
渲染类型
render 方法是您可以定义输出的地方，它可以渲染 Canvas 或 SVG。如果您正在渲染大型数据集，Canvas 的性能将对您有利，因为在 SVG 中渲染时会发生 DOM 爆炸。

这是我的代码任何建议或帮助。

function cob_chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {

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

    let configTimeAndAngle = {
        "type": "line",
        legend: {
            layout: "1x2", //row x column // items means in one two we added two items as legends
            x: "35%",
            y: "6%",
        },
        "preview":{
            "live":true
        },
        'scale-x': {
            zooming: true,
            labels: timeArray,
            'max-items':8,
            //'min-items':7,
            item: {
            'font-size':10
            }
        },
        'scale-y': {
            "min-value":0,
            //"min-value":50,
            "max-value":70,
            
            //zooming: true,
            guide: {
                'line-style': "dotted"
            },
            item: {
            'font-size':10
            }
        },
        tooltip: {
            // text: 'Time : %kt (X) Freq : %%node-value (Y).',
            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',
        data: configTimeAndAngle,
        height: "100%",
        width: "100%",
        output: 'canvas'
    });

}

【问题讨论】：

标签： javascript canvas graph charts zingchart

【解决方案1】：

我已经设法在我们的工作室应用程序中为您创建了一个demo，它有超过 20 万个节点，也许您可以在渲染方法中将此设置与画布一起使用以供参考，看看它是如何进行的。我希望这有帮助。

【讨论】：