1

我的应用程序中有一个 igdatagrid 柱形图。要求是根据数据的变化更新图表。该图表还可以在悬停时看到条形图上的 Customtooltip。现在,当数据更改时,如果未使用工具提示,则会呈现图表,但是当我使用工具提示时,它会显示错误。最初在加载我的页面时一切正常,但在更新数据源后它显示一些错误这是我的 javascript 代码

$("#chart").igDataChart({
                               width: "98%",
                               height: "350px",
                               dataSource: jsonObj,
                               title: "Sector Comparison",
                               windowResponse: "immediate",
                               axes: [{
                                   name: "xAxis",
                                   type: "categoryX",
                                   label: "xValue",
                                   labelTopMargin: 5,
                                   gap: 5
                               }, {
                                   name: "yAxis",
                                   type: "numericY",
                                   minimumValue: 0,
                                   maximumValue: 109,
                                   labelLocation: "outsideRight",
                                   majorStrokeThickness: 2,
                                   majorStroke: "#0856a7",
                                   minorStroke: 'black',
                                   minorInterval: 10,
                                   interval: 50,
                                   formatLabel: function (value) {
                                       if (value == 50) {
                                           return "Medium value";
                                       }
                                   },
                               }, {
                                   name: "yAxis1",
                                   type: "numericY",
                                   title: "Rank",
                                   minimumValue: 0,
                                   maximumValue: 109,
                                   labelLocation: "outsideLeft",
                                   interval: 10,
                                   formatLabel: function (value) {
                                       return value;
                                   },
                               }],
                               series: [{
                                   name: "series1",
                                   type: "column",
                                   isHighlightingEnabled: true,
                                   isTransitionInEnabled: true,
                                   xAxis: "xAxis",
                                   yAxis: "yAxis",
                                   valueMemberPath: "value",
                                   showTooltip: true,
                                   remove: true,
                                   isCustomCategoryStyleAllowed: true,
                               }],
                               assigningCategoryStyle: function (e, ui) {
                                   var startIndex = ui.startIndex;
                                   var endIndex = ui.endIndex;
                                   var items =ui.getItems(startIndex,endIndex);
                                   var color = ui.fill;
                                   for (var i = 0; i < items.length; i++) {
                                       if (items[i].color) {
                                           color = items[i].color;
                                       }

                                   }
                                   ui.fill = color;
                               }

这是我最初绑定工具提示时编写的代码

//get
var series = $("#chart").igDataChart("option", "series");
                            series[0].tooltipTemplate;

                            //Set
                            $("#chart").igDataChart("option", "series",
                                [{
                                    name: "series1",
                                    type: "column",
                                    isHighlightingEnabled: true,
                                    isTransitionInEnabled: true,
                                    xAxis: "xAxis",
                                    yAxis: "yAxis",
                                    valueMemberPath: "value",
                                    showTooltip: true,
                                    isCustomCategoryStyleAllowed: true,
                                    tooltipTemplate: "CustomTooltipTemplate",
                                }]
                            );

“CustomTooltipTemplate”是我的自定义工具提示模板,最初工作得很好

当我获得新数据后,我尝试使用工具提示系列 [0].tooltipTemplate 更新图表;在控制台中显示错误为无法读取未定义的属性'tooltipTemplate',如果我不使用自定义模板而只使用属性showTooltip无法读取未定义的属性'updateToolTip',有什么方法可以动态使用自定义tootltip和dataSource .

我曾经更新数据源,即 jsonObj 。我找到了解决方案。在更新图表时,我会覆盖系列并将数据源分配给图表和渲染系列,如下所示,它可以工作

   $("#chart").igDataChart({
                            series: [{
                                name: "series1",
                                type: "column",
                                isHighlightingEnabled: true,
                                isTransitionInEnabled: true,
                                xAxis: "xAxis",
                                yAxis: "yAxis",
                                valueMemberPath: "value",
                                isCustomCategoryStyleAllowed: true,
                            }],
                        });

                        $("#chart").igDataChart("option", "dataSource", jsonObj);
                        $("#chart").igDataChart("renderSeries", "xAxis", false);
                        $("#chart").igDataChart("renderSeries", "yAxis", false);
                        $("#chart").igDataChart("renderSeries", "yAxis1", false);
4

0 回答 0