更改 CSS Angular Kendo Chart - 设置线条值为 0 的样式

发布于 2025-01-17 00:27:38 字数 346 浏览 0 评论 0原文

我想更改值为零的网格线的 CSS 样式。

我该怎么办？

我的图表：

我想创建一个像这样的图表：

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

新雨望断虹 2025-01-24 00:27:38

最简单的事情是根据点的值更改标记颜色。您可以将系列标记的颜色/背景/边框颜色属性设置为函数而不是字符串并返回所需的颜色：

$("#chart").kendoChart({
  series: [ {
    type: "line",
    color: "#82D225",
    markers: {
      visible: true,      
      border: {
        color: function(point){return point.value<=0 ? "red" : "#82D225"; }
      }
    },
    data: [3300, 3200, 0, -300, -100, 200],    
  }]
});

这是一个 DEMO

与标记相比，更改线条的颜色更为复杂。您可以将渐变应用于颜色高于 0 和颜色低于 0 的线条。

在页面上的任何位置定义 SVG 渐变：

<div style="height: 0px;">
  <svg>
    <defs>      
      <linearGradient id="theGrad" x1="0" x2="0" y1="0" y2="1">
        <stop stop-color="#82D225" offset="0%"></stop>
        <stop id="stop1" stop-color="#82D225" offset="40%"></stop>
        <stop id="stop2" stop-color="red" offset="40%"></stop>
        <stop stop-color="red" offset="100%"></stop>
      </linearGradient>
    </defs>
  </svg>
</div>

然后在脚本中找到数据集的最小值和最大值并更新渐变停止偏移：

  var data = [3300, 3200, 0, -300, -100, 200];      
  var max = Math.max(...data);
  var min = Math.min(...data);
  var color = "url(#theGrad)";
  
  var NeedGradient = max > 0 && min <= 0;
  if (NeedGradient){
    var range = max - min;
    var stop = (max - 0) * 100 / range;
    stop = Math.round(stop);
    $("#stop1, #stop2").attr("offset", stop + "%");
  } else {
    max <=0 ? color = "red" : color  = "#82D225";
  }

最后，在图表渲染上，将渐变应用于线条：

$("#chart").kendoChart({
  series: [ {
    type: "line",
    color: function(point){return point.value<=0 ? "red" : "#82D225"; },
    data: data,    
  }],
  render: function(e) {
    $('#chart svg g [clip-path="url(#kdef2)"] path').css("stroke", color);
  }
});

这是另一个 DEMO

The easiest thing would be to change the Marker color based on value of the point. You can set the color/background/border color property of the series markers to a function instead of a string and return desired color:

$("#chart").kendoChart({
  series: [ {
    type: "line",
    color: "#82D225",
    markers: {
      visible: true,      
      border: {
        color: function(point){return point.value<=0 ? "red" : "#82D225"; }
      }
    },
    data: [3300, 3200, 0, -300, -100, 200],    
  }]
});

Here is a DEMO

Changing the color of the line as opposed to the markers is more complicated. You can apply a gradient to the line with color for above 0 and color for below 0.

Define an SVG gradient anywhere on the page:

<div style="height: 0px;">
  <svg>
    <defs>      
      <linearGradient id="theGrad" x1="0" x2="0" y1="0" y2="1">
        <stop stop-color="#82D225" offset="0%"></stop>
        <stop id="stop1" stop-color="#82D225" offset="40%"></stop>
        <stop id="stop2" stop-color="red" offset="40%"></stop>
        <stop stop-color="red" offset="100%"></stop>
      </linearGradient>
    </defs>
  </svg>
</div>

Then in script find min and max of your dataset and update the gradient stop offsets:

  var data = [3300, 3200, 0, -300, -100, 200];      
  var max = Math.max(...data);
  var min = Math.min(...data);
  var color = "url(#theGrad)";
  
  var NeedGradient = max > 0 && min <= 0;
  if (NeedGradient){
    var range = max - min;
    var stop = (max - 0) * 100 / range;
    stop = Math.round(stop);
    $("#stop1, #stop2").attr("offset", stop + "%");
  } else {
    max <=0 ? color = "red" : color  = "#82D225";
  }

Finally, on chart render, apply the gradient to the line:

$("#chart").kendoChart({
  series: [ {
    type: "line",
    color: function(point){return point.value<=0 ? "red" : "#82D225"; },
    data: data,    
  }],
  render: function(e) {
    $('#chart svg g [clip-path="url(#kdef2)"] path').css("stroke", color);
  }
});

Here is another DEMO

回复收藏 0 原文

~没有更多了~