标签: kendo-dataviz

请参考这个例子:http: //jsfiddle.net/mcLEb/

jQuery("#grid").kendoChart(
    {
        theme: jQuery(document).data("kendoSkin") || "default",
        legend:
        {
            position: "bottom"
        },
        chartArea: {
            height: 200
        },
        seriesDefaults:
        {
            labels:
            {
                visible: true,
                format: "{0}%",
                font: "12px Arial",
                center: '5%'
            }
        },
        series: [{
            type: "pie",
            data:[70,20,10]
        }],
        tooltip:
        {
            visible: false,
            template: "${ category } - ${ value }%"
        },
        title: { padding: 1, margin: 1 },
        seriesColors: ["#d15400", "#d2d2d2","#01619e"],
        plotArea: { margin: { left: 50, right: 50 } },
    });

更多说明:现在,标签位于饼图外部,箭头指向相应的饼图部分.我希望标签本身位于相应的饼图部分内.

我知道馅饼部分可能比它内部的实际文本小,但我会处理它.

提前致谢!

试图将Bullet图表设计为与营销愿望完全一致.所需的Graph看起来像:

如何在条形图的顶部添加标签？

我试过设置Kendo文档中的labels属性:

 labels:
 {
visible: true,
format: "{0}",
font: "14px Arial",
 },

这是我的脚本不起作用:

        $barChart = $("#bar-chart").empty();

         $barChart.kendoChart({
            theme: global.app.chartsTheme,
            renderAs: "svg",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [
                {   
                    type: "verticalBullet",
                    currentField: "score",
                    targetField: "average",
                    target: {
                        color: "#444",
                        dashType: "dot",
                        line: {
                          width: 1,
                        }
                    },
                    labels:
                    {
                        visible: true,
                        format: "{0}",
                        font: "14px Arial",
                    },
                    data: [
                       {
                            score: 93.7,
                            average: 65.2,                              
                        }, {
                            score: 80.2,
                            average: 22.2,
                        }, {
                            score: 60.8, …

所以我有一个使用MVC样式配置配置的图表...

@(Html.Kendo().Chart<DIMVC.ViewModel.CompanyProduction>(Model.CompanyProduction)
     .Name("Chart")
     .Title("Files sent")
     .Legend(legend => legend
     .Position(ChartLegendPosition.Bottom)
 )
 .ChartArea(chartArea => chartArea
     .Background("transparent")
 )
 .SeriesDefaults(seriesDefaults =>
     seriesDefaults.Line().Style(ChartLineStyle.Smooth)
 )
.Series(series => { 
     series.Line(model => model.SentFiles).Name("Sent Files");
     ...  { lots more series added here }
}
.CategoryAxis(axis => axis
     .Categories(model => model.MonthDisplay)
     .Labels(labels => labels.Rotation(-90))
)
.ValueAxis(axis => axis.Numeric()
     .Labels(labels => labels.Format("{0:N0}"))
     .MajorUnit(10000)
)
.Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0:N0}")
)
.Events(e => e
    .SeriesClick("onSeriesClick")
)

)

我的页面上也有一个滑块.当滑块值改变时,我处理这个事件.

@(Html.Kendo().RangeSlider()
    .Name("yearRange")
    .Min(2000)
    .Max(DateTime.Today.Year)
    .SmallStep(1)
    .LargeStep(5)
    .Values(Model.MinYear, Model.MaxYear)
    .Events(e => e.Change("yearRangeChange"))
 )

javascript方法

function …

嗨我在我的应用程序中有kendo图表,它在右侧显示工具提示我想要将工具提示的位置改为左侧.如何做到这一点.我的图表代码是

         $("#chart").kendoChart({
        title: {
            text: "Internet Users"
           },
         legend: {
    position: "bottom"
},
seriesDefaults: {
    type: "column"
},
series: [{
    name: "World",
    data: [15.7, 16.7, 20, 23.5, 26.6]},
{
    name: "United States",
    data: [67.96, 68.93, 75, 74, 78]}],
valueAxis: {
    labels: {
        format: "{0}%"
    }
},
categoryAxis: {
    categories: [2005, 2006, 2007, 2008, 2009]
},
tooltip: {
    visible: true,
    template: "#= category # value: #= value # %"
}
      });

我的小提琴是http://jsfiddle.net/2dNcP/88/

我正在使用 Kendo UI Dataviz 来开发我的应用程序，但是我在渲染图表时遇到了问题。当图表被渲染时，它没有占据所有的div宽度，如下所示。

我的JS代码：

    function creatChart() {
        $("#chart").kendoChart({
            dataSource : {
                transport : {
                    read : {
                        url : "myUrl",
                        dataType : "json",
                    },
                }
            },
            legend : {
                position : "top"
            },
            series : [ {
                type : "area",
                field : "valor1",
                color : "#73c100",
                axis : "axes1"
            }, {
                type : "line",
                field : "valor2",
                color : "#007eff",
                position : "right",
                axis : "axes2"
            } ],
            valueAxes : [ {
                name : "axes1",
                color …

使用Kendo UI Complete for ASP.NET MVC,版本:2013.3,1119(2013年11月20日)...

如果我有这段代码:

$("#status-chart").kendoChart({
    dataSource: {
        data:  [
            {Status: 10}, 
            {Status: 20}, 
            {Status: 200}, 
            {Status: 200}
        ]
    },                
    series: [{
        field: 'Status',
        categoryField: "Status",
        aggregate: 'count'
    }]            
});

我得到这个图表:

如您所见 - 状态10和20的值为1,状态200的值为2.

太棒了,但我真正想要的是在饼图中完全相同的东西(所以,一个包含3个饼图的图表,其中2个是完全相同的尺寸,另一个是其余的2倍).

因此,我想,我需要做的就是type: "pie"这样设置:

$("#status-chart").kendoChart({ 
    dataSource: {
        data:  [
            {Status: 10}, 
            {Status: 20}, 
            {Status: 200}, 
            {Status: 200}
        ]
    },                
    series: [{
        field: 'Status',
        categoryField: "Status",
        aggregate: 'count',
        type: "pie"
    }]            
});

但是这产生了这个图表:

您可以看到状态200重复,并且值正在确定切片的大小.

所以,这是我的问题:

如何创建一个如下图所示但在上面第一个代码片段中绑定到数据源的饼图？

顺便说一句,我不想​​更改数据源的原因是我希望与网格共享它.

我想访问以下事件的索引：seriesClick和seriesHover。我仅在http://docs.kendoui.c​​om/api/dataviz/chart#events-seriesClick此处的文档中看到如何访问特定栏的值和类别，但不能查看该项目所基于的原始对象的数据。

我正在尝试使用角度的剑道图表,我有显示数据的问题,这是我的代码:

HTML:

<div  kendo-chart="rchart" data-k-options="chartOptions" data-role="chart" class="k-chart" style="position: relative;"></div>

使用Javascript:

resultService.getResult().then(function (resultResponse) {
         $scope.data = resultResponse.data;
         $scope.oldReps = _.pluck($scope.data.TreningScores.Item1, 'Item2');
         $scope.newReps = _.pluck($scope.data.TreningScores.Item2, 'Item2');
         $scope.categories = _.pluck($scope.data.TreningScores.Item1, 'Item1');
     });


$scope.chartOptions = {

         legend: {
             position: "bottom"
         },
         seriesDefaults: {
             type: "column"
         },
         series: [{
             name: "Total Visits",
             data: $scope.oldReps
         }, {
             name: "Unique visitors",
             data: $scope.newReps
         }],
         valueAxis: {
             line: {
                 visible: false
             }
         },

         tooltip: {
             visible: true,
             format: "{0}"
         }
     };

问题是从服务器获取数据后图表没有更新,我尝试刷新这样的图表(但没有运气):

$scope.chart = {        
        refreshChart : function() …

我正在使用API​​数据填充kendo - grid,但是在一个字段上添加验证也会自动为每个其他字段工作.

这是kendo-dataSource中的架构:

schema: {
                   model: {
                       id : "id",
                       fields: {
                           id: { editable: false, type: 'number'},
                           name: { editable: true, type : "string" },
                           unique_url: { editable: true , type: 'string'},
                           image_url : { editable: true, type : "string" },
                           title: {type : "string", validation: {
                                                required: true,
                                                validateTitle: function (input) {
                                                    console.log("I am inside validation",input.val());
                                                    if (input.val().length > 5) {
                                                       input.attr("data-validateTitle-msg", "Max length exceeded 5 characters only");
                                                       return false;
                                                    }    

                                                    return true;
                                                }
                                            }
                                            },
                           body: …

我有一个与任何其他数据完美匹配的telerik折线图,但是,当我发送以下内容时,它只有10月的图表.不知道为什么......

创建折线图

$("#leftLine").kendoChart({    

        dataSource: {
            data: ko.toJS(my.line()),
            group: { field: "Grp_Value"},
            sort: {
                field: "MonthTrxDateFirst",
                dir: "asc"
            },
            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        }
                    }
                }
            }
        },
        legend: {
            position: "top"
        },
        series: [{
            type:"line",
            field: "Pct_Sales"
            //name: "% Strategy Sales"
        }],
        categoryAxis: {
            field: "MonthTrxDateFirst",
            labels: {
                rotation: -90,
                dateFormats:
                    {
                        minutes: "HH:mm",
                        hours: "HH:mm",
                        days: "dd/MM",
                        months: "MMM 'yy",
                        years: "yyyy"
                    }
            }, type: "Date",  baseUnit: "months"  ,              

            crosshair: {
                visible: true …