Question

无论如何在折线图中隐藏零（0）值的数据点？我目前正在使用折线图（剑道），似乎找不到一个简单的方法来做到这一点。基本上，一条线显示在图表上的0值，而我根本不显示该行。数据绑定其中一个行结束值为零（我必须将其删除）。样本数据如[30,50,40] ，75,0]

这里我提供的是html代码

 $.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                url: "dataVizWebService.asmx/GetSellInOfficeTrends",
                dataType: "json",
                success: function (data) {

                    $("#chart").kendoChart({
                        dataSource: {
                            data: data.d,
                            value: "#={0}>0"
                        },
                        legend: {
                            position: "bottom"
                        },
                        title: {
                            text: "Population"
                        },
                        series: [
                                    {
                                        type: "line",
                                        field: "Population2010",
                                        name: "Population2010",
                                        axis: "Year",
                                        color: "#4a7ebb"
                                    }, {
                                        type: "line",
                                        field: "Population2011",
                                        name: "Population2011",
                                        axis: "Year",
                                        color: "#be4b48"
                                    }, {
                                        type: "line",
                                        field: "Population2012",
                                        name: "Population2012",
                                        axis: "Year",
                                        color: "#98b954"
                                    }, {
                                        type: "line",
                                        field: "Population2013",
                                        name: "Population2013",
                                        axis: "Year",
                                        dashType: "dash",
                                        color: "#000000"
                                    }
                                    ],
                        valueAxis: [{
                            name: "Year",
                            title: { text: "Population in Millions" }
                        }],
                        categoryAxis: {
                            field: "Week",
                            majorTickType: "none",
                            labels: {
                                skip: 0
                            }
                        },
                        tooltip: {
                            visible: true
                        }
                    })
                }
            });

非常感谢任何帮助。

Answer 1

Kendoui API文档中存在缺失值属性。您可以使用这些属性并检查对您有用的内容。

Answer 2

您可以连接到dataSource的parse()，然后您可以更改将传递给图表的数据。例如：

function parse(items) {
  var item,
      result = [];

  for (var i = 0; i < items.length; i++) {
    item = items[i];
    if (item.value !== 0) {
      result.push(item);
    }
  }

  return result;
}

$(function() {
  var data = [{ value: 30 },{ value: 50 },{ value: 40 },{ value: 75 }, { value: 0 }];
  $("#chart").kendoChart({
    dataSource: {
      data: data,
      schema: {
        parse: parse
      } 
    },
    series: [{
      type: "line",
      field: "value"
    }]
  });
});

在折线图中隐藏零值Kendo ui

2 个答案: