私は剣道チャートを使用していますが、そのポイントのデータ値に関係なくグラフ上の各ポイントに特定のラベルを追加したいのではなく、その点の特性。剣道は各グラフポイントに特定のラベルを追加したい

このコードでは、シリーズごとにラベルをカスタマイズすることができます。デフォルトは上向き矢印、インドは*、ロシア連邦はスペースです。しかし、それは私が各シリーズ内でポイントごとにラベルを変えることはできません。それを行うには？各シリーズのラベル値の配列を持つ方法、またはそのようなものはありますか？

ありがとうございます！

--Bruce

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/column"> 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
    <title></title> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /> 

    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> 
</head> 
<body> 
<div id="example"> 
    <div class="demo-section k-content wide"> 
     <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div> 
    </div> 
    <script> 
     function createChart() { 
      $("#chart").kendoChart({ 
       title: { 
        text: "Gross domestic product growth /GDP annual %/" 
       }, 
       legend: { 
        position: "top" 
       }, 
       seriesDefaults: { 
        type: "column", 
        labels: {template: "↑", 
          visible: true, color: 'red', 
            position: "outsideEnd"} 
       }, 
       series: [{ 
        name: "India", 
        data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855], 
        labels: {template: "*"} 
       }, { 
        name: "Russian Federation", 
        data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3], 
        labels: {template: " "} 
       }, { 
        name: "Germany", 
        data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995] 
       },{ 
        name: "World", 
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727] 
       }], 
       valueAxis: { 
        labels: { 
         format: "{0}%" 
        }, 
        line: { 
         visible: false 
        }, 
        axisCrossingValue: 0 
       }, 
       categoryAxis: { 
        categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011], 
        line: { 
         visible: false 
        }, 
        labels: { 
         padding: {top: 135} 
        } 
       }, 
       tooltip: { 
        visible: true, 
        format: "{0}%", 
        template: "#= series.name #: #= value #" 
       } 
      }); 
     } 

     $(document).ready(createChart); 
     $(document).bind("kendo:skinChange", createChart); 
    </script> 
</div> 


</body> 
</html>

出典

2017-06-18 Krulwich

？ポイントのインデックスによってラベルが決まりますか？ – Shai

私は、データポイントが時間の経過と共にどのように変化したか、および/またはデータポイントを計算する元のデータアイテムの数に基づいて、各データポイントに対して異なる値を生成する式を持っています。たとえば、すべてのデータポイントが調査の数値の平均である場合、平均を計算する際に使用されたアンケート回答が少なくとも5件あるかどうかをラベルに反映させます。一番下の行は、一連のデータ値の配列に似た、ラベルの配列を生成すると仮定しましょう。 – Krulwich

私は、ソリューションを構築するためにあなたのコードを使用しました。あなたはそれをそのまま使用することはできませんが、あなたは一般的な考えを得るでしょう。 this Plunkerを参照してください。

1）2つのフィールドを持つオブジェクトにシリーズのアイテムを変換し、1が実際のデータであり、他方はラベル識別子である：私は基本的に何

は、以下の通りでした。

data: [{value: 1, label: 0}, {value: 2, label: 1}, {value: 3, label: 2}],

2）テンプレートオブジェクト（e）を正しいラベル文字列に変換する関数を作成します。

let labels = { 
    "India": ["label1", "label2", "label3"], 
    "Russian Federation": [2, 4, 6] 
}; 

let getLabel = function(e) { 
    return labels[e.series.name][e.dataItem.label]; 
};

3）関数を系列のテンプレートフィールドに配置します。

seriesDefaults: { 
    labels: { 
     template: getLabel 
    } 
}

出典

2017-06-19 09:51:44 Shai

ありがとう@shaiこれはちょうど私が望んでいたように見えます。質問：剣道は、配列要素を値として直接使用するのではなく、配列要素オブジェクトの "value"キーからグラフにする値を引き出すことをどのように知っていますか？ – Krulwich

'series.field'設定のデフォルトです。あなたは[ここ]（http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.field）について読むことができます。 – Shai

注意 'template'設定を' seariesDefaults'に変更しました。これは、すべてのシリーズで一度だけ書く必要があるため、簡単になります。 – Shai

あなたが値に基づいてテキストを設定するには、ラベルのvisual propertyを使用することができます。各ポイントのラベルを決定するルールがどうあるべきか

seriesDefaults: { 
    type: "column", 
    labels: { 
      visible: true, color: 'red', 
      position: "outsideEnd", 
      visual: function(e) { 
       var center = e.rect.center(); 
       var val = parseFloat(e.text); 
       var text = "↑"; 
       if (val > 4) text = "*"; 
       if (val > 7) text = " "; 
       return new kendo.drawing.Text(text, [center.x, e.rect.origin.y], { 
        fill: { 
         color: "red" 
        } 
       }); 
       } 

      } 
},

DEMO

出典

2017-06-19 13:55:28 ezanker

ありがとう@ezanker私はこれのような何かを考えていたが、それはラベルがカテゴリとシリーズの次元ではなく値の関数であることを意味する。多くの場合、あなたが書いたものは完璧ですが、私の場合、異なるグラフ座標で同じデータ値に対して異なるラベルが必要になることがあります。ありがとう！ – Krulwich

剣道は各グラフポイントに特定のラベルを追加したい

答えて

DEMO

関連する問題