如何在Salesforce Visual Force中实现Javascript？
作者：互联网
我目前正在尝试在Visual force中实现javascript和html以生成图形.下面的脚本假设是这样做的,但是我所看到的只是一个空白页.我要导入的资源包括
> jQuery的
> D3
>直流
>交叉过滤器
>火力基地
> Twitter的引导
> 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的答案
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>
标签：d3-js,visualforce,javascript,salesforce 来源： https://codeday.me/bug/20191121/2051772.html