当我的样式表有标题时，ZingChart工具提示问题

我正在做一个概念验证，看看ZingCharts在我们的web应用程序中是否是一个可行的解决方案。我试图创建一个简单的堆叠条形图。在我的例子中，一切都很好，直到我给我的样式标签添加标题，title="mystyle"。我在样式标签中使用标题，因为它模拟了我们完整应用程序中的情况，其中我们包含了许多css文件，所有文件的标题都是我们自定义的页面样式。

这是我的示例代码…

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
  .h1 {
    margin: 0 0 1px 0;
    padding: 5px 7px 7px 7px;
    font-size: 11px;
    font-weight: bold;
    background-color: #ceceb5;
    border-color:#ffffff #ffffff #998B74 #ffffff;
    border-width:0px 0px 2px 0px;
    border-style:solid solid ridge solid;
  }
  table.fullTable {
    width: 100%;
  }
  td.jsChartSection {
    text-align: center;
    border: 1px solid #888888;
    background-color: #EFEFEF;
    padding: 10px 20px 10px;
  }
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
    "type": "bar",
    "stacked":true,
    "stack-type":"normal",
    "backgroundColor":"#FFF0FF",
    "hoverMode":"node",
    "tooltip": {
        "htmlMode":false
    },
    "legend":{
        "align":"center",
        "vertical-align":"bottom"
    },
    "plotarea": {
        "width": '100%',
        "height": '100%',
        "margin": '20 20 50 70'
    },
    "scale-x":{
        "values":["2009","2010","2011","2012","2013", "2014"],
        "items-overlap":true,
        "item":{
            "font-angle":-45,
            "auto-align":true
        }
    },
    "scale-y":{
        "label":{
            "text":"# of Widgets"
        },
        "values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
    },
    "series": [
        { "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
        { "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
    ]
};
window.onload=function(){
zingchart.render({
id:'chartDiv',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
    <div class="h1">Chart Management with Zingcharts</div>
    <div class="h1">Another div element</div>
    <div class="h1">And another div element</div>
    <div class="h1">And yet another div element</div>
    <div class="databox">
        <table cellspacing="5" class="fullTable">
            <tr>
                <td class="jsChartSection">
                    <div>
                        <div id='chartDiv'></div>
                    </div>
                </td>
            </tr>
        </table>
    <!--  databox -->
    </div>
    <!-- Content -->
</body>
</html>

当我在这个例子中这样做时，它会导致由ZingChart生成的以下img元素出现问题…

<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">

这个元素被放置在我的页面的左上角，现在工具提示的行为很奇怪。

我怎么能让图表正确工作，而仍然使用我的自定义页面样式?

谢谢!

把它放在你的

元素:

<style title="zingchart"></style>

这将迫使ZingChart将自己的样式注入到该元素中，以防止冲突。

我是ZingChart团队的，如果你还需要什么，请告诉我:)

编辑:

显然，浏览器实现了"首选"样式表的概念，其想法是，如果在一个页面上有:

<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">

…只使用其中一个CSS元素的样式，另一个元素将被忽略。内联标签也是如此。

问题是ZingChart动态地创建了自己的CSS规则，并注入了一个title=" ZingChart "的标签。所以，当在HTML页面中有另一个<样式>或& lt;每日;如果使用不同的"title"，其中一个(很可能是ZingChart样式)将被忽略。

我们已经从我们的代码中删除了设置"title"的代码，这将在我们的下一个公开版本中提供。同时，你需要从你的

相关内容

最新更新

热门标签：