剑道折线图 - 点之间的差距答案

【问题标题】：Kendo line chart - gap between points剑道折线图 - 点之间的差距
【发布时间】：2019-12-24 06:14:23
【问题描述】：

我正在使用最新版本的剑道图表，我想要一个有年份间隔的折线图 - 每年有 3 个纵轴点。

我尝试过的

我不能使用 missingSpace 'gap' 属性，因为出现间隙的值不一定为 null。
我不能为每一年使用不同的数据源，因为我需要图例中的悬停和单击功能来隐藏/显示/禁用所有年份的相应行。使用不同的数据源使每个图例条目仅与行的一个部分（即一年）相关联
我想我可以使线条的颜色“透明”，所以我使用了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"
      },
    });

我认为我可以使用与上述链接类似的方法将线的宽度设为零 (0)，但是尽管可以更改颜色（通过委托给函数），但线的宽度不能在相同的情况下更改方式，因为您无法针对 width 属性定义函数

谁能帮忙？

【问题讨论】：

"我不能使用 missingSpace 'gap' 属性，因为出现间隙的值不一定为空" 这里应用的登录是什么？ gap 属性在您的示例中正常工作。拥有不同线条颜色的唯一方法是按照此处所述进行堆叠telerik.com/forums/line-chart-single-line-multi-color 像这样dojo.telerik.com/@ezanker/eruJE
也许我对您的理解不正确-您提供的帖子/链接中所问的是我所追求的（即，请参阅原帖作者的澄清回复，其中提到“只是为了让我的问题更清楚......我正在寻找的是从5到1红色，1到18蓝色，18到3白色，3到15绿色等的线”）。但是，我不看到该澄清的答案实际上满足了该要求。该帖子要求 same 线上的点之间使用不同的颜色 - 它 not 要求具有不同颜色的不同线

标签： kendo-ui linechart

【解决方案1】：

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

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

【讨论】：