9

我正在做一个概念验证，看看 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==">

这个元素位于我页面的左上角，工具提示现在表现得很奇怪。

如何让 ZingChart 在仍然使用我的自定义页面样式的同时正常工作？

谢谢！

4

1 回答 1

8

把它放在你的 <head> 元素中：

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

这将强制 ZingChart 将自己的样式注入该元素，防止冲突。

我是 ZingChart 团队的一员，如果您还有其他需要，请告诉我 :)

编辑：

显然，浏览器实现了“首选”样式表的概念，这个想法是，如果在一个页面上你有：

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

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

问题是 ZingChart 动态创建自己的 CSS 规则，并注入一个带有 title="zingchart" 的标签。因此，当 HTML 页面中存在另一个具有不同“标题”的 <style> 或 <link> 时，其中一个（很可能是 ZingChart 样式）将被忽略。

我们已经从我们的代码中删除了设置“标题”的代码，这将在我们的下一个公开版本中提供。同时，您需要从 <style> 元素中删除“title”属性。

于 2015-08-10T21:14:37.080 回答