2012-11-12 6 views
1

Я создал диаграмму области, иллюстрирующую состояние многих медиаплееров в течение одного дня.Укажите шаг между основными линиями сетки в диаграмме области кендо датавиз

Я хочу, чтобы в каждый час была важная линия сетки и небольшая линия сетки каждые полчаса. Я не вижу, где вы можете установить «шаг» линии сетки.

Вот как я в настоящее время его настройке:

$("#chart").kendoChart({ 
    theme: "blueOpal", 
    title: { 
     visible:false 
    }, 
    chartArea: { 
     height: 800 
    }, 
    legend: { 
     position: "bottom" 
    }, 
    seriesDefaults: { 
     type: "area", 
     stack: true 
    }, 
    series: [], 
    valueAxis: { 
     labels: { 
      format: "{0}", 
      visible: true 
     } 
    }, 
    categoryAxis: { 
     categories: [], 
     labels: { 
      visible: true, 
      step:60 
     }, 
     minorGridLines: { 
      visible: false 
     }, 
     majorGridLines: { 
      visible: true, 
     }, 
     majorTicks: { 
      visible: false, 
      size: 2 
     } 
    }, 
    tooltip: { 
     visible: true, 
     format: "{0}" 
    }, 
    seriesColors: [ 
      '#336699', 
      '#EBAD60', 
      '#FF0000', 
      '#9582BB', 
      '#028482' 
    ] 
}); 

И это выглядит следующим образом. Это уменьшенное изображение отображает меньше отображаемых линий сетки, но это изображение все еще указывает на то, что существует так много строк, что они перестают служить цели.

enter image description here

ответ

3

Я отправил тот же вопрос на форумах Telerik:

http://www.kendoui.com/forums/dataviz/chart/specify-the-step-between-major-gridlines-in-a-datetime-series.aspx#2378855

Ответ: вы не можете установить шаг в линии сетки Кендо UI DataViz.

Надеюсь, у меня будет повод вернуться и обновить этот ответ в 2013.


Позже редактировать

Наконец, В выпуске Кендо UI 2014.1, можно указать, частота вертикальных линий сетки. Это делается с помощью свойств конфигурации categoryAxis.majorGridLines.step и categoryAxis.minorGridLines.step

categoryAxis: { 
     categories: [], 
     labels: { 
      visible: true, 
      step: 60 
     }, 
     minorGridLines: { 
      visible: true, 
      step: 30 
     }, 
     majorGridLines: { 
      visible: true, 
      step: 60 
     }, 
     majorTicks: { 
      visible: false, 
      size: 2 
     } 
    },