javascript - zing 图表未在 Canvas 中呈现

Question

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

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

function chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {
  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", //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,
            transform: {
                type: 'date'
            },

            item: {
            'font-size':10
            }
        },
        'scale-y': {
            'auto-fit': true,
            guide: {
                'line-style': "solid"
            },
            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_cob_f',
        data: configTimeAndAngle,
        height: "100%",
        width: "100%",
        output: "canvas"
    });

}

已更新
我试过这样绘制但仍然有问题。上面的图表也更新了，我们需要改变我打发时间的方式吗？我的时间格式类似于 2022-10-10 23:24:03 这样的时间数组 'scale-x': { labels: timeArray} i像这样添加时间

"series": [
 
            {
                values: [],
                'line-color': "#3366ff",
                'background-color': "#3366ff",
                text: "Centeral Frequency"
            },
            {
                values: [],
                'line-color': "#00cc99",
                'background-color': "#00cc99",
                text: "Frequency Hopping"
            }
        ]
configTimeAndAngle.series[0].values.push([frequency_array_ff]);
configTimeAndAngle.series[1].values.push([frequency_array_fh]);
configTimeAndAngle.series[0]=values.[frequency_array_ff];
configTimeAndAngle.series[1]=values[frequency_array_fh];
configTimeAndAngle.series[0]=frequency_array_ff;
configTimeAndAngle.series[1]=frequency_array_fh];

Answer 1

我已经成功地为您创建了一个 demo在具有超过 200k 节点的工作室应用程序中，也许您可​​以在渲染方法中将此设置与 Canvas 一起使用以供引用，看看效果如何。我希望这有帮助。