Question

我正在进行概念验证，看看ZingCharts是否是我们网络应用程序中可行的解决方案。我正在尝试创建一个简单的堆积条形图。在我的示例中，一切正常，直到我为我的样式标记添加标题，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正常工作？

谢谢！

Answer 1

将它放在你的＆lt; head＆gt;中元素：

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

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

我在ZingChart团队，请告诉我你是否需要其他任何东西：）

编辑：

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

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

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

问题是ZingChart动态创建自己的CSS规则，并注入title =“zingchart”的标签。因此，当在HTML页面中有另一个＆lt; style＆gt;或者＆lt; link＆gt;使用不同的“标题”，其中一个（很可能是ZingChart风格）将被忽略。

我们已从代码中删除了设置“标题”的代码，该代码将在我们的下一个公开发布中提供。同时，您需要从＆lt; style＆gt;中删除“title”属性。元件。

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

1 个答案: