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. 如何解决这个问题？
4

2 回答 2

0

前段时间我遇到了同样的问题——这是因为我没有在 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() 函数 - 您应该能够复制它如果你真的想要的话（你当然需要修改它）。

于 2019-08-05T18:45:41.687 回答
0

  1. 您没有在代码中定义 svg 元素。您的浏览器返回0，因为您要求一个不存在的元素的widthand 。height

  2. 只需<svg></svg>在您的div.

评论后编辑

我回答了你的问题。如果你想问如何放置一个 svg 元素Rgraph并编辑它的大小，你应该问这个。

首先，答案 N.1 几乎成立。您尝试设置尚不存在的元素的widthand 。稍后将使用该语句创建它。因此，您的 javascript 的前两行什么都不做。heightsvgnew RGraph.SVG.HBar

其次，导致该结果的最可能原因是该svg元素未正确创建。代码有几个问题。我做了一个工作示例来说明它们：

<!DOCTYPE html >
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="../libraries/RGraph.svg.common.core.js" ></script>

    <script src="../libraries/RGraph.svg.hbar.js" ></script>


    <title>RGraph demo</title>


    <meta name="description" content="An SVG HBar Chart " />
    <meta name="robots" content="noindex, nofollow" />

<script>

var datay = ["NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004","NS0000004"];

var datax = [5.000,5.000,5.000,5.000,5.000,10.000,10.000,40.000,50.000];

$(document).ready(function(){
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
});
$("#sparepartconsumption svg").attr("width", '800px');
$("#sparepartconsumption svg").attr("height", '500px');
console.log(datax)
console.log(datay)
});
</script>

</head>
<body>
<div style="width: 90%; height: 500px; float:left" id="sparepartconsumption">

</div>

</body>

注意事项：

  • 您的datax数组包含字符串，它应该包含数字（没有双引号）。

  • 如果使用jquery，则需要确保在div使用时包含元素存在。这就是为什么Rgraph元素被包裹在 `$(document).ready(function(){}) 块中的原因。

  • 如您所见，更改svg元素大小的代码在最后。这不是必需的，因为Rgraph将根据父元素设置大小。

  • 如果您尝试此代码，请确保src脚本元素指向正确的路径。在我的系统中，它是../libraries/RGraph.svg.common.core.jsand ../libraries/RGraph.svg.hbar.js，但是 YMMV。

于 2019-08-05T09:17:52.870 回答