Блог

Существующий код диаграммы выглядит следующим образом :

 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 :

 <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> 
 

Тогда результат выглядит следующим образом :

Новый результат

Пожалуйста, помогите мне, как я могу показать ‘%’ в левой части диаграммы и как я могу показать метки, похожие на существующие выходные данные

Ну, мне удалось обойти эту проблему. Вот код :

  <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>