Kendo UI DataViz條形圖x軸標籤重疊

X軸標籤在MVC4條形圖中重疊。任何想法來解決它。提前致謝。Kendo UI DataViz條形圖x軸標籤重疊

@(Html.Kendo().Chart<McAfee.CBRMS.CodeAnalysisReport.BL.Utility.ModuleViewModel>() 
     .Name("StaticAnalysisOverAllBarGraph") 
     .DataSource(dataSource => dataSource 
      .Read(read => read.Action("GetStaticAnalysisOverAllBarGraph", "Home",new { filepath = ViewData["filePath"], jobId = ViewData["jobId"]})) 
     ) 
     .Series(series => { 
      series.Column(model => model.CriticalErrors).Name("Critical Errors").Color("DarkRed"); 

     series.Column(model => model.Errors).Name("Errors").Color("Red"); 
     series.Column(model => model.CriticalWarning).Name("Critical Warning").Color("Orange"); 
     series.Column(model => model.Warning).Name("Warnings").Color("Yellow"); 
    }) 
    .ValueAxis(axis => axis.Numeric() 
     .Labels(labels => labels.Rotation(5) 
      .Format("{0}") 
     ) 
    ) 
    .CategoryAxis(axis => axis 
     .Categories(model => model.Name) 
     ) 
     .Tooltip(tooltip => tooltip 
     .Visible(true) 
     .Format("{0}") 
    ) 
    )

來源

2013-08-23 srikar gandhi

試試這個例子，

<script> 
    function createChart() { 
     $("#chart").kendoChart({ 
      title: { 
       text: "Site Visitors Stats /thousands/" 
      }, 
      legend: { 
       visible: true 
      }, 
      seriesDefaults: { 
       type: "bar" 
      }, 
      series: [{ 
       name: "Total Visits", 
       data: [56000, 63000, 74000, 91000, 117000, 138000] 
      }, { 
       name: "Unique visitors", 
       data: [52000, 34000, 23000, 48000, 67000, 83000] 
      }], 
      valueAxis: { 
       max: 140000, 
       line: { 
        visible: false 
       }, 
       minorGridLines: { 
        visible: true 
       } 
      }, 
      categoryAxis: { 
       labels: { 
        background: "green", 
        color: "white", 
        visible:true 
       }, 
       categories: ["Janasdfasdfasdfasdfsadfasdf", "Febasdfasdfasdfasdfjhkhsadf", "Marasdfasdfasdfasdfasdfasdf", "Apr", "May", "Jun"], 
       crosshair: { 
        tooltip: { 
         padding: { 
          right: 20, 
          left: 20 
         }, 
         background: "green", 
         visible: true 
        }, 
        visible: true 
       }, 
       majorGridLines: { 
        visible: true 
       } 
      }, 
      tooltip: { 
       visible: true, 
       template: "#= series.name #: #= value #" 
      } 
     }); 
    } 

    $(document).ready(createChart); 
</script>

HTML視圖

<div id="chart"> 
</div>

使用crosshair爲拉布勒tooltip。我不知道該怎麼breake拉布勒150字符，但如果你在做labels然後visible:false你拉布勒只在tooltip

來源

2013-08-23 12:30:47 Jaimin

對不起！我的問題尚未解決。 X軸標籤仍然重疊。 X軸標籤的長度很大（150包機）。我只想顯示它的一部分，在鼠標懸停的應用程序上應該顯示整個文本。可以做到嗎？ –

@srikar gandhi：我只是更新我的代碼。但不知道如何打破標誌性格。 – Jaimin

的CategoryAxis顯示：{ 標籤：{旋轉：-45}，

這能否幫助？改變程度以防止重疊。您也可以使標籤不可見（可見：false），並提供工具提示

來源

2015-01-10 16:01:04

Kendo UI DataViz條形圖x軸標籤重疊

回答

相關問題