syncfusion ej chart redraw [n] undefined

问题描述 投票:1回答:1

我正在使用ASP MVC,我有一个内置脚本的ej图表,我需要刷新它的内容:

我的图表是这样构建的:

var modelSummaryList = getMySummaryModel();
        var summaryChartDataManager = ej.DataManager(($scope.FirstLoad && IsCurrentUserDpiUser()) ? null : modelSummaryList);
        jQuery("#MySummaryChart").ejChart({
            range: { min: summaryChartDataManager == null ? -1 : summaryChartDataManager.ChartMin, max: summaryChartDataManager == null ? 1 : summaryChartDataManager.ChartMax },

            series: [{
                name: "MTM",
                tooltip: {
                    visible: true,
                    format: "#point.x#: #point.y# #series.name#"
                },
                dataSource: summaryChartDataManager,
                xName: "CtpyShort",
                yName: "MTM"
            }, {
                name: "Threshold",
                tooltip: {
                    visible: true,
                    format: "#point.x#: #point.y# #series.name#"
                },
                dataSource: summaryChartDataManager,
                xName: "CtpyShort",
                yName: "Threshold"
            }, {
                name: "My Held/(Posted)",
                tooltip: {
                    visible: true,
                    format: "#point.x#: #point.y# #series.name#"
                },
                dataSource: summaryChartDataManager,
                xName: "CtpyShort",
                yName: "Held"
            }],
            type: 'column',
        });

哪个工作正常,但在过滤和更改数据时,我需要重绘图表,所以我这样做:

$scope.RefreshChart = function (data) {
        var chart = $("#MySummaryChart").ejChart("instance");
        chart.model.range.min = data.MyTradeSummaryVM.ChartMin;
        chart.model.range.max = data.MyTradeSummaryVM.ChartMax;
        for (var s = 0; s <= chart.model.series.length - 1; s++) {
            var pts = IsCurrentUserDpiUser() ? $.grep(data.MyTradeSummaryVM, function (item) {
                return item.ClientID == localStorage.getItem("MyPosting_client_sticky");
            }) : data.MyTradeSummaryVM;
            chart.model.series[s].points = [];

            for (var p = 0; p <= pts.length - 1; p++) {

                var newPt = new Object();

                newPt.x = pts[p].CtpyShort;

                if (chart.model.series[s].name == "MTM")
                    newPt.y = pts[p].MTM;
                else if (chart.model.series[s].name == "Threshold")
                    newPt.y = pts[p].Threshold;
                else if (chart.model.series[s].name == "My Held/(Posted)")
                    newPt.y = pts[p].Held;

                newPt.visible = true;
                chart.model.series[s].points.push(newPt);

            }
        }
        chart.redraw();

    };

抛出错误TypeError:n [0]在chart.redraw()行上未定义,我被难倒了。请注意,如果我通过cshtml构建图表而不是像这样的javascript,则RefreshChart()有效:

@(Html.EJ().Chart("MySummaryChart")
                    .PrimaryXAxis(pr => pr.Title(tl => tl.Text("")))
                    .PrimaryYAxis(pr => pr.Range(ra => ra.Max(Model.ChartMax).Min(Model.ChartMin)).Title(tl => tl.Text("")))
                    .CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true).Marker(mr => mr.DataLabel(dt => dt.Visible(true).EnableContrastColor(true)))
                    .Tooltip(tt => tt.Visible(true).Format("#point.x# : #point.y# #series.name# ")))
                    .Series(sr =>
                    {
                       .
.
.

                    })

                    .Load("loadTheme")
                    .IsResponsive(true)
                    .Size(sz => sz.Height("400"))
                    .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); }))

但我选择使用JS coz我需要处理null和firstload(意味着首次加载时图表上不会出现任何数据,除非用户选择客户端(过滤器),否则不应加载任何数据。我似乎无法制作它是有效的,如果通过HTML,我无法删除图表xaxisregions标签以及其他数据,唯一删除的东西是主要的Y轴点,但不是标签。

charts refresh syncfusion redraw
1个回答
0
投票

我们已经分析了报告的情景。我们想知道,当使用dataSource绑定图表数据时,然后在使用新数据刷新图表时,需要将数据绑定到series.dataSource属性而不是serial.points,以便只刷新图表正常。我们已经针对上述情况准备了一个样本。找到代码片段以实现此要求。

<input type="button" id="refreshChart" onclick="refresh()" value="Refresh Chart" />

function refresh(sender) {
    var chart = $("#MySummaryChart").ejChart("instance");
    for (var s = 0; s <= chart.model.series.length - 1; s++) {
        //Obtained random data,
        var pts = GetData().data;
        var newPt = [];
        for (var p = 0; p <= pts.length - 1; p++) {
            if (chart.model.series[s].name == "MTM")
                newPt.push({ "CtpyShort": pts[p].CtpyShort, "MTM": pts[p].MTM });
            else if (chart.model.series[s].name == "Threshold")
                newPt.push({ "CtpyShort": pts[p].CtpyShort, "Threshold": pts[p].Threshold });
            else if (chart.model.series[s].name == "My Held/(Posted)")
                newPt.push({ "CtpyShort": pts[p].CtpyShort, "Held": pts[p].Held });
        }
        //Assign the updated data to dataSource property
        chart.model.series[s].dataSource = newPt;
    }
    chart.redraw();
}

在按钮单击事件的上述代码中,我们刷新了图表数据。在这里,您需要将x值分配给CtpyShort,将三个系列的y值分配给MTM,Threshold和Held,因为我们在最初渲染图表时已经映射了这些属性。

更新数据前的屏幕截图:enter image description here

更新数据后的屏幕截图:enter image description here

可从以下链接中找到供参考的样品。

Sample Link

如果您仍然面临任何问题,请通过修改上述样本来回复我们,或者为您的样本提供复制步骤,这将有助于进一步分析并尽快为您提供解决方案。

谢谢,Dharani。

© www.soinside.com 2019 - 2024. All rights reserved.