Question

现有的图表代码如下：

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

，输出图表如下：

Existing-Chart-Output

当我使用以下角度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>

然后输出如下：

New Output

请帮助我如何展示＆＃39;％＆＃39;在图表的左侧，如何显示与现有输出类似的标签

Answer 1

好吧，我已经成功解决了这个问题。这是代码：

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

Kendo Angular 2 Chart

1 个答案: