既存のチャート コードは次のようになります。
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
}
}
})
出力チャートは次のようになります。
angular 2剣道チャートの次のコードを使用すると:
<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>
次に、出力は次のようになります。
チャートの左側に「%」を表示する方法と、既存の出力と同様のラベルを表示する方法を教えてください。