剑道Angular 2图表

Question

The existing chart code is like as follows :

jQuery("#staarAllSubjectGrades").kendoChart({
    legend: {
        visible: true,
        position: 'bottom'
    },
    seriesDefaults: {
        type: "column",
        labels: {
            visible: true,
            template: "#= (!value || value < 0) ? 'N/A' : (value).toFixed(0) + '%' #",
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= (!value || value < 0) ? 'N/A' : (value).toFixed(0) + '%' #",
        color: 'white'
    },
    dataSource: {
        data: finalData
    },
    series: series,
    valueAxis: {
        majorGridLines: {
            visible: true
        },
        labels: {
            template: "#= (value).toFixed(0) # %"
        },
        visible: true,
        min: 0
    },
    categoryAxis: {
        field: "DISTNAME",
        labels: { visible: this.stateStaarAllSubjectGrades },
        majorGridLines: {
            visible: false
        },
        line: {
            visible: false
        }
    }
})

and the output chart is like as :

Existing-Chart-Output

When I use the following code of angular 2 kendo charts :

<kendo-chart>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [categories]="chartStaarAllSubjectGrades.categories">
            <kendo-chart-category-axis-item-labels [visible]="stateStaarAllSubjectGrades">
            </kendo-chart-category-axis-item-labels>
            <kendo-chart-category-axis-item [majorGridLines]="{ visible: false }" [line]="{ visible: true }">
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-series>
        <kendo-chart-series-item [data]="chartStaarAllSubjectGrades.series"> 
        </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-labels [content]="value + '%'">
            </kendo-chart-value-axis-item-labels>
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
</kendo-chart> 

Then the output is like as :

New Output

Please assist me how can I show '%' in the left hand side of the chart and how can I show the labels similar to the existing output

Answer 1

Well I have manage to get around this issue. Here is the code :

 <kendo-chart>
  <kendo-chart-legend position="bottom"></kendo-chart-legend>
  <kendo-chart-series-defaults type="column">
   <kendo-chart-series-defaults-labels format="p">
   </kendo-chart-series-defaults-labels>
  </kendo-chart-series-defaults>

 <kendo-chart-series> 
  <kendo-chart-series-item  *ngFor="let item of chartStaarAllSubjectGrades.series" [name]="item.category" [data]="[item]">  
  </kendo-chart-series-item>  
 </kendo-chart-series>

  <kendo-chart-value-axis>
   <kendo-chart-value-axis-item>
       <kendo-chart-value-axis-item-labels format="p">
       </kendo-chart-value-axis-item-labels>
   </kendo-chart-value-axis-item>
 </kendo-chart-value-axis>

 </kendo-chart>