如何将“verticalRangeArea”与Kendo UI Chart中的折线图组合？

问题描述 投票：0回答：1

我需要的是在这张图片上构建图表：enter image description here

我试图通过组合两种类型的系列“verticalRangeArea”和“scatterLine”来做到这一点。出于某种原因，他们没有一起工作。

$("#chart").kendoChart({
    valueAxis: {
      min: new Date("2014/01/01 08:00").getTime(),
      max: new Date("2014/01/01 17:00").getTime(),
      majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds
      labels: {
        template: "#= kendo.toString(new Date(value), 'HH:mm') #"
      }
    },     
    series: [       
    {
      type: "scatterLine",
      
      data: [[new Date("2014/01/01 09:30").getTime(), 5], [new Date("2014/01/01 09:30").getTime(), 11]]
    },
    { 
      type: "verticalRangeArea", 
      data: [[new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()], [new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()]],        
    },
    { 
      type: "verticalRangeArea", 
      data: [[new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()], [new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()]],        
    }],    
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="chart"></div>
</body>
</html>
javascript kendo-ui kendo-chart
1个回答
0
投票

我来到下一个解决方案：

var data = {
  points: [
    [new Date("01/01/2013 01:00"), 2],
    [new Date("01/01/2013 01:20"), 5],
    [new Date("01/01/2013 01:30"), 3],
    [new Date("01/03/2013 15:00"), 1]
  ],
  plotBands: [
    { from: new Date("01/01/2013"), to: new Date("01/02/2013"), name: "name1", color: "coral", opacity: 0.5 },
    { from: new Date("01/03/2013"), to: new Date("01/04/2013"), name: "name2", color: "blue", opacity: 0.5 }
  ]
};

$("#chart").kendoChart({
  zoomable: true,
  series: [
    {
      type: "scatterLine",
      data: data.points,
      color: "red",
      width: 2
    }
  ],
  xAxis: {
    type: "date",
    plotBands: data.plotBands,
    name: "xAxis",
    baseUnit: "hours",
    min: new Date("01/01/2013"),
    max: new Date("01/04/2013"),
    crosshair: {
      tooltip: {
        visible: true,
        background: "#ff6800",
        format: "{0:dd/MM/yyyy HH:mm}"
      },
      visible: true
    }
  },
  
  render: function(e) {
    var plotBands = data.plotBands;
    var xAxis = e.sender.getAxis("xAxis");
    var group = new kendo.drawing.Group();
    for(var i = 0; i < plotBands.length; i++) {
      var slot = xAxis.slot(plotBands[i].from);
      var labelPos = [slot.origin.x + 10, 20 ];
      var label = new kendo.drawing.Text(plotBands[i].name, labelPos, {
        fill: {
          color: "black"
        },
        font: "18px Arial,Helvetica,sans-serif"
      });
			group.append(label);
    }
    e.sender.surface.draw(group);
  }
  
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.