Kendo UI 带缺失值的折线图

Question

如何更改 kendo ui 图形配置，以便它为每个整数画线并考虑 "interpolate" 缺失值。在这个例子中，我想要一个从 1 到 12 的所有整数的折线图，即使 required 数据在数据源中不可用。

请注意，我的数据源是动态的，它可以有大约 1000 条记录。

 dataSource = [{"measurementPoint":1,"data_1":10},{"measurementPoint":2,"data_1":22},{"measurementPoint":5.5,"data_1":5},
  {"measurementPoint":7,"data_1":10},{"measurementPoint":10.06,"data_1":22},{"measurementPoint":12.2,"data_1":5}];
 
 $("#chart").kendoChart({
   dataSource: { data: dataSource },
   seriesDefaults: {
  type: "line",
        markers: { visible: false }},
   categoryAxis: [{   
  justified: true,
  field: "measurementPoint",
  labels: {
   step:2,
   format: "###",
   visible:true },
  majorGridLines: { visible: false },
        majorTicks: { visible: false },
        crosshair: { visible: false }
   }],
   series: [
  { field: "data_1", name: "Pressure" }
   ],
   tooltip: {
   visible: true,
  shared: true
   }
 });

<html>
<head>
  <title>Kendo Chart</title>

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

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  
</head>
<body>
  <div id="chart"> </div>
</body>
</html>

Answer 1

使用 Scatter line 图表代替 'line' 图表。 'Scatter line' 图表使用数字 x 轴正确缩放图表。

Kendo UI 带缺失值的折线图

Kendo UI line chart with missing values

javascript

kendo-ui

kendo-chart