C1 Wijmo Controls 4.0 C1LineChart 异步画线图问题

登录

这个是我在前台异步调用返回的Json数据，输出画的图代码如下：
$.ajax({
type: "

OST",
         url: "MonitorQualityHandler.ashx",
         dataType: "json", //json格式接收数据
         data: { "Data": "values", "SQLLineName": "TrendLine", "Time": Date().toString() },
         success: callback_TrendLine
      });
function callback_TrendLine(msg) {
      var XNames = [];
      var YNames = [];
      var YMinRange = [];
      var YMaxRange = [];
      if (msg != null) {
         $.each(msg.values, function (index, value) {
            XNames.push(value.SampleTime);
            YNames.push(parseFloat(value.Number));
            YMinRange.push(parseFloat(value.MinValue));
            YMaxRange.push(parseFloat(value.MaxValue));
         });
      }
      $("#<%=C1LineChart1.ClientID%>").c1linechart("option", "seriesList", [

         {
            label: "值",
            legendEntry: true,
            fitType: "line",
            data: { x: XNames, y: YNames },
            markers: { visible: true, type: "circle" }
         }
      ]);

}
由上面的数据画出如下图：

如上图是我异步加载出来的数据，画的线图，但是我希望有两条范围的线图
如下图：我要加两条上限，或者下限的直线

请问这个怎么实现呢？？？

ZenosZeng · ZenosZeng

在前台通过 jQuery 可以完成自定义图形的添加操作，比如通过以下代码可以在Chart上添加最大值、最小值警戒线

<script type="text/javascript">
$(document).ready(function () {
// 创建最大值警戒线
var node = document.createElementNS("http://www.w3.org/2000/svg", "path");
node.setAttribute('d', 'M 67.84 150 H 731');
node.setAttribute('class', 'wijchart-axis-gridline');
node.setAttribute('fill', 'none');
node.setAttribute('stroke', 'blue');
node.setAttribute('stroke-dasharray', '0');
node.setAttribute('stroke-width', '1');
$("svg").append(node);
// 创建最小值警戒线
var node2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
node2.setAttribute('d', 'M 67.84 350 H 731');
node2.setAttribute('class', 'wijchart-axis-gridline');
node2.setAttribute('fill', 'none');
node2.setAttribute('stroke', 'red');
node2.setAttribute('stroke-dasharray', '0');
node2.setAttribute('stroke-width', '1');
$("svg").append(node2);
});
</script>

复制代码

hlb77219 · hlb77219

这个是什么意思啊？？看不懂啊？
1. document.createElementNS("http://www.w3.org/2000/svg", "path");
是不是我这里的  $("#<%=C1LineChart1.ClientID%>")

  2. node.setAttribute('d', 'M 67.84 150 H 731');是什么意思？？

3.  $("svg").append(node); 这里的 $("svg") 是不是  $("#<%=C1LineChart1.ClientID%>")

ZenosZeng · ZenosZeng

hlb77219

不知以上示例是不是你需要功能

1、C1LineChart主要是通过 svg 来实现的，所以我们需要在 Chart 下的 svg 对象中添加需要的自定义对象，关于 svg 可以参考这里

2、node.setAttribute('d', 'M 67.84 150 H 731'); 是设置路径（Path）对象的几个属性，可以属性的含义可以参考这里

3、$("svg") 是 $("#<%=C1LineChart1.ClientID%>") 中的节点，你可以通过在浏览器中F12查看页面源码了解到该信息

		自动登录	找回密码
密码			立即注册

[已处理] C1 Wijmo Controls 4.0 C1LineChart 异步画线图问题

本帖子中包含更多资源

3 个回复

本帖子中包含更多资源

本帖子中包含更多资源

活字格认证

圣诞拼拼乐

微信认证勋章

讲师达人

元老葡萄

悬赏达人