Question

我正在努力实现以下行为：

enter image description here

但我的图表如下所示。它在json数组中只有一条记录

enter image description here

即使一周中的某些天没有数据，我也需要在第一张图片中显示工作日。

$("#kk").kendoChart({
            dataSource: {
                data:_data
            },
            seriesColors: ["Orange"],                

            seriesDefaults: {
                type: "column",
                gap: .5,
                overlay: {
                    gradient: "none"
                }
            },
            series: [{
                name: "weight",
                field: "weight",
                categoryField: "createddate",
                aggregate: "avg",
            }],

            categoryAxis: {
                type: "date",
                baseUnit: "weeks",
                labels: {
                    rotation: -45,
                    dateFormats: {
                        weeks: "ddd"
                    }
                },
                majorGridLines: {
                    visible: false
                },
                majorTicks: {
                    visible: false
                }
            }                        
        });

Answer 1

所以你需要做的就是将结束点附加到你的数据数组中。您可以在控制器中执行此操作，该控制器返回数据或稍后使用JavaScript（这将导致您重绘图表，除非您在将数据放入图表之前捕获数据。）

您需要像其他数据一样创建一个Json对象数组。它可能看起来像这样。 startDate和endDate是您选择的范围。

function endPoints(){
return [{createddate:startDate,weight:0},{createddate:endDate,weight:0}];
}

您可以使用以下内容附加这些数据点。

function addDataToChart(data) {
  var ds = $('#kk').data('kendoChart').dataSource;
  ds.data($.merge(data, endPoints()));
  //You can use ds.data() if you want to use the data that is already in the chart
}

在我自己的Dashboard项目中，我将使用自己的Ajax调用获取数据，并在将endPoints放入图表之前附加endPoints。完整的ajax函数可能如下所示。

$.ajax({
  url:'URLtoReturnData'
  dataType:'json',
  success:function(data){addDataToChart(data);},
  error:function(e){errorHandler(e);}  
});

我希望这会有所帮助。

Answer 2

这是一种解决方法，可以显示没有值的日期。对于没有重量值的日期，解决方法是权重为0.000000000000000001。此外，我已将类别baseunit更新为days并为您添加了一些示例数据，以便您可以查看它的显示方式。当您返回JSON标记时，您可以为0.000000000000000001设置对其具有0值的日期。代码如下：

       @*Sample Data:*@

       var _data=[{"weight":149.91,"createddate":"8/1/2014"},
       {"weight":0.000000000000000001,"createddate":"8/2/2014"},
       {"weight":200,"createddate":"8/3/2014"},
       {"weight":0.000000000000000001,"createddate":"8/4/2014"}]

       $("#kk").kendoChart({
            dataSource: {
                data:_data
            },
            seriesColors: ["Red"],                
            seriesDefaults: {
                type: "column",
            },
            series: [{
                name: "weight",
                field: "weight",
                categoryField: "createddate",
            }],
            categoryAxis: {
                type: "date",
                baseUnit: "days",
                labels: {
                    rotation: -45,
                    dateFormats: {
                        days: "ddd"
                    }
                },
            }                        
        });

请查看此JSFiddle以查看输出

在剑道图表中显示所有工作日的图表？

2 个答案: