Kendo 折线图 - 点之间的差距

Question

我使用的是最新版本的 Kendo 图表，我想要一个年份之间有间隔的折线图 - 每年有 3 个垂直轴点。

我试过的

我不能使用 missingSpace 'gap' 属性因为出现间隙的值不一定为空。
我不能为每年使用不同的数据源，因为我需要图例中的悬停和单击功能来生成所有年份的相应行的 hide/show/disable。使用不同的数据源使得每个图例条目仅关联到行的一部分（即一年）
我想我可以改变线的颜色 "transparent" 所以我使用了描述的方法 http://jsfiddle.net/whoamiwho/EE22M/ 但它只改变了点的颜色（而不是连接点的线）- 下面是jsfiddle中的代码

    $("#chart").kendoChart({ series: [{
        colorField: "valueColor",
        data: [
         { value: 1, valueColor: "red" },
         { value: 2, valueColor: "green" },
         { value: 2, valueColor: "blue" }
        ]
      }],
      seriesDefaults: {
        type: "line",
        markers: {
           // background: "#da7633",
        },
        style: "smooth",
        missingValues: "gap" 
        //width: "3px"
      },
    });

我想我可以使用与上面 link 类似的方法将线的宽度设为零 (0)，但是尽管可以更改颜色（通过委托给函数）但线的宽度不能像不能针对宽度属性

有人能帮忙吗？

Answer 1

最后我发现单独数据源的方法（一个显示在图例中，其余隐藏）是根据 https://dojo.telerik.com/ILIYofED/18 实现此目的的最佳方法 - 注意 click/mouseover 事件允许整行（实际上包含单独的数据源）看起来像一个

...
series: [
  {
    field: "value",
    categoryField: "year",
    name: "United States",
    color: "orange"
  },
  {
    field: "expectedValue",
    dashType: "dash",
    color: "orange",
    name: "auxilliary",
    visibleInLegend: false

  }
],
legendItemClick: function(e){
  var chart = this;
  if(e.series.name === "United States"){
    chart.findSeriesByName("auxilliary").toggleVisibility(!e.series.visible);
  }
},
legendItemHover: function(e){
  var chart = this;
  if(e.series.name === "United States"){
    chart.findSeriesByName("auxilliary").toggleHighlight(e.series.highlight.visible);
  }
},          
legendItemLeave: function(e){
  var chart = this;
  if(e.series.name === "United States"){
    chart.findSeriesByName("auxilliary").toggleHighlight(!e.series.highlight.visible);
  }
}, 
...

Kendo 折线图 - 点之间的差距

Kendo line chart - gap between points

linechart

kendo-ui