时间戳

首页 > 解决方案 > rgraph SVG得到0的宽度和高度

jquery - rgraph SVG得到0的宽度和高度

问题描述

$("#sparepartconsumption svg").attr("width", '800px');
$("#sparepartconsumption svg").attr("height", '500px');
console.log(datax)
console.log(datay)
var bar = new RGraph.SVG.HBar({
  id: 'sparepartconsumption',
  data: datax,
  options: {
    yaxisLabels: datay,
    xaxis: false,
    yaxis: false,
    colorsSequential: true,
    backgroundGridVlines: false,
    title: 'Consumption',
    titleColor: 'black',
    titleSize: 14,
    titleX: 240,
    titleY: 15,
    shadow: false,
    strokestyle: 'rgba(0,0,0,0)',
    textFont: 'Roboto-Black',
    textSize: 7,
    colors: ['#FFDE00', '#097054'],
    labelsAbove: true,
    // keyColors:  [ '#FFDE00', '#097054'],
    // key: legend,
    // keyPosition: 'graph',
    textAccessible: true,
  }
}).grow({
  frames: 60
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 90%; height: 500px; float:left" id="sparepartconsumption">

</div>

样本数据：

["NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004"]

["5.000","5.000","5.000","5.000","5.000","10.000","10.000","40.000","50.000"]

在此处输入图像描述

在此处输入图像描述

我正在使用 rgraph 生成图表。数据都是好的问题是 SVG 的宽度和高度为 0。尝试使用 jQuery 设置宽度和高度，但没有帮助。

  1. 为什么我的 SVG 的宽度和高度为 0？
  2. 如何解决这个问题？

标签： jquerysvgrgraph

解决方案

前段时间我遇到了同样的问题——这是因为我没有在 SVG 标签上使用正确的命名空间。

在 RGraph 中创建 SVG 标签的代码是这样的：

    var svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute('style', 'top: 0; left: 0; position: absolute');
        svg.setAttribute('width', container.offsetWidth);
        svg.setAttribute('height', container.offsetHeight);
        svg.setAttribute('version', '1.1');
        svg.setAttributeNS("http://www.w3.org/2000/xmlns/", 'xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
        svg.__object__    = obj;
        svg.__container__ = container;
    container.appendChild(svg);

（如果您只使用它，它将无法正常工作 - 它需要针对您的环境进行修改）。

如果您只是传递 DIV 标签的 ID，那么 RGraph 会在其中为您创建一个 SVG - 或者如果您真的想自己创建它，请查看 RGraph.SVG.createSVG() 函数 - 您应该能够复制它如果你真的想要的话（你当然需要修改它）。

推荐阅读