个人中心
gpt4 book ai didi

javascript - 如何在 Salesforce Visual Force 中实现 Javascript？

转载 作者：行者123 更新时间：2023-11-29 10:43:03 25 4
gpt4 key购买 nike

我目前正在尝试在 Visual force 中实现 javascript 和 html 以生成图表。假设下面的脚本可以执行此操作，但我看到的只是一个空白页面。我正在导入的资源包括

  • jquery
  • D3
  • 直流
  • 交叉过滤器
  • 火力点
  • 推特 Bootstrap
  • dc.css
  • bootstrap.css

也许，这是我通过他们的 src 链接导入库的方式，但这以前没有造成问题。 

<apex:page showHeader="false" standardStylesheets="false">
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js" type="text/javascript"></script>
    <script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" media="screen" /> 

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" /> 


</head>

<body>
<div class='pie-graph span6' id='dc-magnitude-chart'></div>
<script type = "text/javascript">


new Firebase('https://MYFIREBASE.firebaseIO.com/BetaActivities').on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
    ndx = new crossfilter(lst);

    var XDimension = ndx.dimension(function (d) {return d.Owner;});
    var YDimension = XDimension.group().reduceCount(function(d) {return d.Owner;});
    dc.barChart("#dc-magnitude-chart")
        .width(480).height(150)
        .dimension(XDimension)                                
        .group(YDimension)
        .centerBar(true)
        .gap(56)
        .x(d3.scale.ordinal().domain(XDimension))
        .xUnits(dc.units.ordinal)
        .xAxisLabel("Market Developer")
        .yAxisLabel("Unique Counts")
        .elasticY(true)
        .xAxis().tickFormat(function(v) {return v;}); 
    dc.renderAll();

    });

</script>


</body>

</apex:page>

最佳答案

我使用你的代码来帮助另一个用户并最终解决了你的代码:

您看到空白的原因:

看Keith C的回答

来源:https://salesforce.stackexchange.com/questions/45455/using-dc-js-d3-js-and-crossfilter-in-visualforce/45461?noredirect=1#comment59006_45461

When running JavaScript you should always have your browser's developer tools displayed, particularly the JavaScript console. If you do (at least in Chrome and probably other browsers too), you will find that all the http:// requests are blocked:

[blocked] The page at '...' was loaded over HTTPS, but ran insecure content from '...': this content should also be loaded over HTTPS. which will cause your page to fail.

Change to https:// locations as the original page is loaded via https://

<apex:page showheader="false" standardStylesheets="false">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"/>
<apex:includeScript value="{!URLFOR($Resource.d3js)}"/>
<apex:includeScript value="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"/>
<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js" />
<apex:includeScript value="https://cdn.firebase.com/js/client/1.0.17/firebase.js"/>
<apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"/>
<apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css"/> 
<apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
<body>
<div class='pie-graph span6' id='dc-magnitude-chart'></div>
<script type = "text/javascript">


new Firebase('https://shippy.firebaseIO.com/BetaActivities').on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
    ndx = new crossfilter(lst);

    var XDimension = ndx.dimension(function (d) {return d.Owner;});
    var YDimension = XDimension.group().reduceCount(function(d) {return d.Owner;});
    dc.barChart("#dc-magnitude-chart")
        .width(480).height(150)
        .dimension(XDimension)                                
        .group(YDimension)
        .centerBar(true)
        .gap(56)
        .x(d3.scale.ordinal().domain(XDimension))
        .xUnits(dc.units.ordinal)
        .xAxisLabel("Market Developer")
        .yAxisLabel("Unique Counts")
        .elasticY(true)
        .xAxis().tickFormat(function(v) {return v;}); 
    dc.renderAll();

    });

</script>


</body>
</apex:page>

enter image description here

关于javascript - 如何在 Salesforce Visual Force 中实现 Javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25025008/

25 4 0
文章推荐： mysql - 在一条语句中使用 concat、coalesce、sum 和 format
文章推荐： mysql - 一张或两张表 : that is the quest*on
文章推荐： javascript - 使背景图像响应 - fullpage.js
文章推荐： php - MySQL - PHP 事务和表锁
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com