Question

我需要为草稿图中的所有数据点绘制x和y截距。我经历了主要和次要网格线。但这不是我的完美解决方案。

就像下面的图片一样：

The sample image with x and y intercepts only on data points

Answer 1

您可以使用图表的渲染功能在图表表面上绘制水平和垂直线。在下面的演示中，我命名了x和y轴，以便在渲染函数中可以将getAxis（）方法与slot和range一起使用。参见 DOCS 。

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

仅在数据点上有划痕点的网格线

1 个答案: