Линия сетки только на точке данных для точечных точек - PullRequest
Новая
       16

Линия сетки только на точке данных для точечных точек

0 голосов
/ 23 ноября 2018

Мне нужно нарисовать X & Y перехваты для всех точек данных в диаграмме.Я прошел основные и второстепенные линии сетки.Но это не могло быть моим идеальным решением.

Как на изображении ниже:

Образец изображения с x и y перехватывает только точки данных

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете использовать функцию рендеринга диаграммы для рисования горизонтальных и вертикальных линий на поверхности диаграммы.В следующей демонстрации я называю оси x и y, чтобы в функции визуализации я мог использовать метод getAxis () вместе со слотом и диапазоном.См. DOCS .

DEMO 

var data = [[0.67, 5.4], [2.2, 2], [3.1, 3]];
$("#chart").kendoChart({
  series: [{
    type: "scatter",
        data: data,
        markers: {size: 16},
  }],
  yAxis: { name: "value",   majorGridLines: {visible: false } },
  xAxis: { name: "category",    majorGridLines: {visible: false } },
  render: function(e){
    var chart = e.sender;
    var yAxis = chart.getAxis("value");
    var xAxis = chart.getAxis("category");
        //iterate each point on the chart
        for (var i=0; i<data.length; i++){
            //vertical line
            var valRange = yAxis.range();
        var valSlot = yAxis.slot(valRange.min, valRange.max);
            var point = data[i];            
            var catSlot = xAxis.slot(point[0]);
            var path = new kendo.drawing.Path({
             stroke: {color: "#B3BDBD", width: 1}
            }).moveTo(catSlot.origin.x + catSlot.size.width/2, valSlot.origin.y)
                .lineTo(catSlot.origin.x + catSlot.size.width/2, valSlot.bottomRight().y);

            chart.surface.draw(path); 
            //horizontal line
            var ySlot = yAxis.slot(point[1]);
            var xRange = xAxis.range();
            var xSlot = xAxis.slot(xRange.min, xRange.max);
            var pathH = new kendo.drawing.Path({
             stroke: {color: "#B3BDBD", width: 1}
            }).moveTo(xSlot.origin.x,  ySlot.origin.y + ySlot.size.width/2)
                .lineTo(xSlot.bottomRight().x, ySlot.origin.y + ySlot.size.width/2);

            chart.surface.draw(pathH); 
        }
  }
});
...