Question

我正在使用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();

    };

在chart.redraw（）行上抛出错误 TypeError：n [0]未定义，我感到难过。请注意，如果我通过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轴点而不是标签。

Answer 1

我们已经分析了报告的情景。我们希望您知道，当使用 dataSource 绑定图表数据时，在使用新数据刷新图表时，您需要将数据绑定到 series.dataSource 属性不是 series.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 ，阈值和已保留，因为我们在最初渲染图表时已映射这些属性。

更新数据前的屏幕截图：

更新数据后的屏幕截图：

参考样本可以从以下链接中找到。

Sample Link

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

谢谢，陀罗尼。

syncfusion ej chart redraw [n] undefined

1 个答案: