标签: kendo-chart

我有一个用JavaScript生成的KendoUI图表.有没有办法用命令清除plotArea？为了在等待DataSource读取远程数据时显示"正在加载..."图像.

谢谢

我试图在 Kendo 柱形图上为每个项目获取多个标签所需的布局如下所示

我只能得到这个布局

import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';

export type TrendItem = {
  clientName: string;
  periodName: string;
  income: number;
};

@Component({
  selector: 'my-app',
  template: `
        <kendo-chart>
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [labels]="valueAxisLabels">
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
              <kendo-chart-series-item-labels [content]="labelVisual">
              </kendo-chart-series-item-labels>
           </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `,
})
export class AppComponent {
  public valueAxisLabels: ValueAxisLabels = {
    font: 'bold 16px …

我有传说中的KendoChart馅饼.由于某些原因,默认情况下图例是交互式的,通过单击图例项目图表可启用/禁用饼图的各个部分.

我没有找到任何方法来禁用此行为:http://docs.telerik.com/kendo-ui/api/dataviz/chart

它会被禁用吗？

我在页面上绘制了Kendo图表,我将其图像数据发布到一个操作,以将此base64编码数据保存到(SQL Server)数据库.

这是exportImage我首先从dataURL拆分base64数据的调用:

chart.exportImage({
    width: 727,
    height: 262
}).done(function(data) {
    // split 'image/png,xxxyyy=' into two
    var dataParts = data.split(',', 2);
    // TODO: need to strip from 'data:image/png;base64'
    dataParts[0] = 'image/png';

    $.ajax({
        url: "@Url.Action("
        Export_TargetPrice ", "
        Charts ")",
        type: 'POST',
        data: {
            contentType: dataParts[0],
            base64: dataParts[1],
            companyID: companyId
        }
    }).done(function() {

    });

});

我的Export_TargetPrice方法基本上只是调用Convert.FromBase64String然后写入数据库:

/// <summary>
/// Export TargetPrice chart image for company (without download).
/// </summary>
[HttpPost]
public ActionResult Export_TargetPrice(string contentType, string base64, int companyID) …

我在剑道图表中比较新.我有一张图表如下;

@(Html.Kendo().Chart<PlodWareWeb.Models.TotalDrilledBySize>()
    .Name("totalDrilledBySizeChart")
    .Title("Total Drilled By Size")

    .ChartArea(chartArea => chartArea.Background("transparent").Height(350))
    .DataSource(dataSource => dataSource.Read(read => read.Action("GetTotalDrilledBySizeChartData", "Home")))
    .Legend(legend => legend.Visible(false))
    .Series(series =>
    {
        series.Column(model => model.TotalDrilled, model => model.GroupName);
    })
    .CategoryAxis(axis => axis.Categories(model => model.HoleSize).Line(line => line.Visible(true)).Labels(labels => labels.Rotation(0)))
    .CategoryAxis(axis => axis.Categories(model => model.DisplayName)
    .Line(line => line.Visible(false))
    .Labels(labels => labels.Rotation(-90).Format("{0}")))
    .ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0}")))

    .Tooltip(tooltip => tooltip.Visible(true).Format("{0}%").Template("#= series.name #: #= value #")
    )
)

如何在模板中将"model.DisplayName"和"model.HoleSize"显示为工具提示？我尝试过以下但它给了我"未定义".有人可以帮忙吗？谢谢.

.Template("#= model.DisplayName #: #= series.name #: #= value #")

要么

.Template("#= CategoryAxis.model.DisplayName #: #= series.name …

我为每个数据点都有一个可缩放的面积图和一个x轴标签。加载图表时，标签太多了，因此我将 step选项：

categoryAxis: {
    name: 'CatAxis',
    categories: graphLabels,
    step: 30
}

但是，当用户放大时，我需要减少步骤数，否则根本不会显示任何标签。因此，我订阅了zoomEnd事件并计算所需的步数：

function onZoomEnd(e) {
    var xRange = e.axisRanges.CatAxis;
    if (xRange) {
    var diff = xRange.max - xRange.min;
    var step = 1;
    while (diff / step > 6) {
        step++;
    }
    e.sender.setOptions({ categoryAxis: { labels: { step: step } } });
}

但是在此处设置选项会导致图表刷新，从而失去其缩放级别。最终目标是显示合理数量的标签，并且在放大和缩小时它们不会重叠或消失。任何想法如何实现这一目标？

如何更改kendo条形图 - 系列标签定位？考虑以下小提琴:http://jsfiddle.net/ZPUr4/149/

在图表中,对于正值,条形值位于顶部,对于负值,条形值位于底部.

如何将系列标签值定位在条形图的顶部以获得正值和负值？

如果条形值变化,如何将所有标签值放在同一水平线上？

如果我的问题不明确,请告诉我.

以下是HTML代码:

    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

JS代码:

function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    background: "transparent",

                }
            },
            series: [{
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            }, {
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            }],
            valueAxis: {
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000,  
                line: {
                    visible: false
                },
                title: …

我在我的项目中使用Telerik图表.我能够改变图表的颜色而不是样式.我的意思是风格 - 在所有图表上都出现浮雕效果(第一张图片).我需要应用的是平面颜色(第二张图片).如何在我的所有剑道图表中删除图表的渐变效果？

提前致谢.

我正在尝试使用Kendo UI在MVC中通过模型和控制器创建饼图，该饼图将显示两种食物的总量，但由于附带的错误，我无法获得结果。

饼图中显示的类型：1）饮料和2）餐食

我指的是这种图表。

Kendo UI饼图

该链接显示了使用foreach的多个图表，但我仅关注仅一个图表，该图表会将总收入与餐食和饮料区分开。

我的控制器是：

 public ActionResult _SpainElectricityProduction()
        {
            List<PieGraphModel> objList = new List<PieGraphModel>();
            for (int i = 0; i < 2; i++)
            {
                if (i == 0)
                {
                    objList.Add(new PieGraphModel { coke = 10, pepsi = 20, Type = "Beverages", total = 30 });
                }
                else
                {
                    objList.Add(new PieGraphModel { chiniese = 50, italian = 40, Type = "Meals",  total = 90 });
                }
            }
            return Json(objList);
        }





 @(Html.Kendo().Chart<MvcRepo_Kendo.Models.PieGraphModel>()
            .Name("chart")
            .HtmlAttributes(new { @class = "small-chart" }) …

对于这个例子:

http://dojo.telerik.com/arIhI/2

$("#chart").kendoChart({
  dataSource: {
    data: [
      { score: 1.1, legend: 'a' },
      { score: 2.5, legend: 'b' },
      { score: 3.25, legend: 'c' }
    ]
  },
  series: [{
    field: "score",   
    labels: {
      visible: true,
      template: "Score is: #: value #% legend is: ????"
    },
  }]
});

2个问题:

1)是否可以将html添加到模板中(比如Value is: ....)？

2)是否可以向标签添加多个值.我想添加分数和传奇.

-谢谢.