jQuery $(document).ready在某些情况下无法正常工作

时间:2015-10-25 05:01:31

标签: jquery c3.js

我正在使用c3绘制一些图表。由于c3不允许我以我想要的方式编辑轴标签,所以我在加载图表后使用jQuery编辑它。 (仅供参考,我试图显示1-24,在y轴上再次显示1-24而不是1-48小时)。无论如何,我无法让这个工作。我已将代码放在(document).ready内。

<!-- jQuery -->
<script src="../jquery/dist/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        $("#c3-chart2").hide();

        $('input[type="radio"]').click(function() {
            if ($(this).attr("value") == "chart1") {
                $("#c3-chart2").hide();
                $("#c3-chart1").show();
            }
            if ($(this).attr("value") == "chart2") {
                $("#c3-chart1").hide();
                $("#c3-chart2").show();
            }
        });

        $("#button").click(function() {
            $("#c3-time-chart .c3-axis-y .tick text tspan").text("lol");
        }); 

        $("#c3-time-chart .c3-axis-y .tick text tspan").text("lol");

    });

<body> 
    The chart ids are here
</body>

<!-- C3 and D3 Charts-->
    <script src="../d3/d3.min.js" charset="utf-8"></script>
    <script src="../c3/c3.min.js"></script>
    <script src="../graphs/d3-test-data.js"></script>
    <script src="../graphs/c3-test-data.js"></script>

我尝试从谷歌Chrome控制台更改标签,但它确实有效。我还添加了一个按钮,当我点击它时会更改标签。它们都像魅力一样。但不知何故,一旦页面加载,我无法自动执行此操作。所有类似的问题都有答案,比如把代码放在我已经在做的(document).ready中。请帮我找出问题所在。

1 个答案:

答案 0 :(得分:1)

Document.ready会关闭或点击按钮永远不会工作。问题是Document.ready在文档完成时触发,但在触发所有JavaScript之后没有必要(例如创建d3图表的逻辑)。因此,您需要在创建图表后运行文本修改代码。

如何获得这个的伪代码思想是运行一个setInterval,它使用jQuery检查该节点是否存在然后设置值并销毁间隔,但如果该节点不存在则重复该间隔。