6

KendoUIの線グラフを使用しています。折れ線グラフにラベルがあり、ラベルが上で途切れています。これを防ぐ方法はありますか?

KendoUI折れ線グラフ

使用するjsFiddleプロジェクトは次のとおりです。http://jsfiddle.net/rodneyhickman/2eWYg/1/

これが私のマークアップです:

<div style="padding:20px;" >
   <div id="divChart"></div>
</div>

これが私のスクリプトです:

jQuery('#divChart').kendoChart({
seriesDefaults: {
    type: "line",
    missingValues: "interpolate"
},
legend: {
    position: "bottom"
},
tooltip: {
    visible: true,
    format: "{0}%"
},
valueAxis: {
    min: 70,
    max: 90,
    plotBands: [{
        from: 70,
        to: 75,
        color: "#f5f5f5"},
    {
        from: 80,
        to: 85,
        color: "#f5f5f5"},
    {
        from: 90,
        to: 95,
        color: "#f5f5f5"}]
},
series: [{
    type: "line",
    name: "Product 1",
    color: "#004990",
    width: 1,
    markers: {
        background: "#004990"
    },
    tooltip: {
        visible: true,
        template: "<b>Product 1</b><br/>Current Score: #= value #<br/>#= category # "
    },
    labels: {
        visible: true
    },
    data: [88.71, 88.87, 88.91, 89.39, 89.44, 89.47, 89.39, 89.38, 89.25, 88.81, 88.9, 88.84, 88.79]},
{
    type: "line",
    name: "Market Segment",
    color: "#da7633",
    width: 1,
    markers: {
        background: "#da7633"
    },
    tooltip: {
        visible: true,
        template: "<b>Market Segment</b><br/>Current Score: #= value #<br/>#= category # "
    },
    data: [75.9, 75.58, 75.54, 75.19, 74.9, 74.42, 74.51, 74.72, 74.55, 74.44, 74.15, 73.86, 73.79]}],
categoryAxis: {
    labels: {
        rotation: -45,
        step: 1,
        skip: 0
    },
    categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"]
}
});​
4

2 に答える 2

12

plotAreaにマージンを追加することで、ラベル用のスペースを確保します。

plotArea:{マージン:{上:20、左:5、右:5、下:5}}、

解決策は次のとおりです。

http://jsfiddle.net/rodneyhickman/2eWYg/2/

于 2012-05-30T15:17:59.607 に答える
1

ドキュメントのように、ポイントの下にラベルを追加するようにシリーズを構成できます。

notes: {
  position: "bottom"
},
于 2015-01-02T00:54:39.090 に答える