Question

我要求在剑道线图中使用水平线来表示最大值和最小值以及上限和下限。

Answer 1

另一种解决方案是添加plotbands。

示例：

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    valueAxis:  {
        plotBands: [
            { from: 89, to: 90, color: "red" }
        ]
    }
});
</script>

Answer 2

只需在图表中添加一个系列。这将在图表中创建一个hr行。我们也可以管理线路位置。

Answer 3

通过Kendo-chart渲染事件处理程序添加带状线或水平线（最小/最大/平均）

我想在这里添加一个完整的解决方案，因此可以出于各种原因使用它。

使用kendo 2015.3.1111版本，IE11 / 10

我有同样的挑战来添加类似于MS-Chart带状线的上限和下限线。 Kendo 2015.3.1111及之前的版本不支持此功能。

我的解决方案是

将 stripline 属性添加到kendo-chart value-axis属性
使用渲染事件处理程序绘制每个值轴 stripline 属性提供的行
值轴（y轴）可以具有多条带状线

确保＆lt; head＆gt;

<link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>

这是stripline属性。我将水平位置的实施留给你。

valueAxis: [{
            name:..
            labels:{..}   
            stripLine: [{
                value: 78,
                color: "blue",
                borderwidth: "1px",
                //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
                dashstyle: "dot",   
                label: "In Max",
                labelposition: "",
                labelfont: "12 sans-serif"
            },
            {
                value: 70,
                color: "blue",
                borderwidth: "1px",
                dashstyle: "dot",
                label: "In Min",
                labelposition: "",
                labelfont: "12 sans-serif"
            }]
        }

第二个重点是值轴（y轴）的数量。剑道图表＆＃34;价值轴＆＃34; property具有值轴或值轴数组。渲染事件处理程序应该找出对象与数组

render: function (e) {
            if (e.sender.options.valueAxis.length) {
                $.each(e.sender.options.valueAxis, function (i, value) {
                    drawStriptLine(e.sender, value);
                });
            }
            else {
                drawStriptLine(e.sender, e.sender.options.valueAxis);
            }
        }

您可以在下面的代码段中看到drawStripline。以下是有关代码的一些注释。

确保轴名称匹配
axis.slot是数据点。如果您知道有多少数据点，则数据轴从0开始到最后一个数据点编号。设置更高的数字将返回最后一点。否则，将从最后一个插槽中指定的0到最后一点绘制线。
KendoChart属性renderAs是可选的，但是canvas不会引发渲染事件处理程序，因此使用VML或SVG
Chrome（测试版本52.0.2743.116米）不支持点线和虚线（仅实线），IE11 / 10支持所有短划线样式
plotBands实现也被演示为Render Event Handler的替代

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />

  <link href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>

  <!--<link href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" rel="stylesheet" />-->
  <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
  <!--<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>-->
</head>

<body>
  <div id="chart" />

  <script>
    var mPlotBands = [];

    mPlotBands.push({
      from: 60,
      to: 61,
      color: "red",
      borderwidth: "3px",
      borderstyle: "dashed",
      label: "Min",
      labelposition: ""
    })

     mPlotBands.push({
      from: 95,
      to: 94,
      color: "red",
      borderwidth: "3px",
      borderstyle: "dashed",
      label: "Max",
      labelposition: ""
    });


    $("#chart").kendoChart({
      renderAs: "VML", //"canvas", "SVG", "VML"
      title: {
        text: "Average In/Out Temperatures"
      },
      legend: {
        position: "bottom"
      },
      seriesDefaults: {
        type: "line"
      },
      series: [{
        name: "In Temperature",
        data: [74, 74, 76, 78, 74, 70],
        axis: "intemperature"
      }, {
        name: "Out Temperature",
        data: [45, 65, 75, 95, 80, 70],
        axis: "outtemperature"
      }],
      categoryAxis: {
        name: "CategoryAxis",
        categories: ["May", "June", "July", "Aug", "Sep", "Oct"]
      },
      valueAxis: [{
        name: "intemperature",
        labels: {
          format: "{0}F"
        },
        min: 50,
        max: 110,
        plotBands: [],
        stripLine: [{
          value: 78,
          color: "blue",
          borderwidth: "1px",
          dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
          label: "In Max",
          labelposition: "",
          labelfont: "12 sans-serif"
        }, {
          value: 70,
          color: "blue",
          borderwidth: "1px",
          dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
          label: "In Min",
          labelposition: "",
          labelfont: "12 sans-serif"
        }]
      }, {
        name: "outtemperature",
        labels: {
          format: "{0}F"
        },
        plotBands: mPlotBands,
        stripLine: [{
          value: 75,
          color: "green",
          borderwidth: "3px",
          dashstyle: "dot", //"dot", "dash", "solid", "dashDot", "longDash", "longDashDot"
          label: "Out Avg",
          labelposition: "",
          labelfont: "italic 12 sans-serif"
        }]
      }],
      render: function(e) {
        if (e.sender.options.valueAxis.length) {
          $.each(e.sender.options.valueAxis, function(i, value) {
            drawStriptLine(e.sender, value);
          });
        } else {
          drawStriptLine(e.sender, e.sender.options.valueAxis);
        }
      }
    });

    function drawStriptLine(chart, yaxis) {
      var axis = chart.getAxis(yaxis.name);
      var stripline;

      $.each(yaxis.stripLine, function(i, stripline) {
        // Locate value slot
        var slot = axis.slot(stripline.value);

        // Locate last category slot. Trying to get the last slot on the right given data x-axis plots
        var categoryAxis = chart.getAxis("CategoryAxis");
        var categorySlotBeg = categoryAxis.slot(0);
        var categorySlotEnd = categoryAxis.slot(100000);

        // Render a line element
        var line = new kendo.drawing.Path({
          stroke: {
            color: stripline.color,
            width: stripline.borderwidth,
            dashType: stripline.dashstyle
          }
        });

        line.moveTo([categorySlotBeg.origin.x, slot.origin.y]).lineTo([categorySlotEnd.origin.x, slot.origin.y]);

        var labelPos = [categorySlotEnd.origin.x - 50, slot.origin.y - 20];
        var label = new kendo.drawing.Text(stripline.label, labelPos, {
          fill: {
            color: stripline.color
          },
          font: stripline.labelfont
        });

        var group = new kendo.drawing.Group();
        group.append(line, label);

        chart.surface.draw(group);
      });
    }
  </script>

</body>

</html>

＆＃13;

希望这有帮助。

参考

http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands

在图表中添加一条水平线

3 个答案: