第一步，在Axure创建一个矩形，取名字
第二步，对矩形添加交互，选择载入时，选择链接到URL或文件路径
第三步，打开Echarts或Highcharts官网
Echarts：在官网中打开示例，选择你想要的图形，点击~
然后在代码编译器中加入以下代码：其中 var dom =$('[data-label=test]').get(0);中的test 为Axure矩形的名字。
-
javascript:
-
var script =
document.
createElement(
'script');
-
script.
type =
"text/javascript";
-
script.
src =
"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
-
document.
head.
appendChild(script);
-
setTimeout(
function(
){
-
var dom =$(
'[data-label=test]').
get(
0);
-
var myChart = echarts.
init(dom);
-
-
-
var option = {
-
-
};
-
-
-
if (option &&
typeof option ===
"object"){
-
myChart.
setOption(option,
true);
-
}},
800);
复制option下面的所有代码，放入到下面这里
-
javascript:
-
var script =
document.
createElement(
'script');
-
script.
type =
"text/javascript";
-
script.
src =
"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
-
document.
head.
appendChild(script);
-
setTimeout(
function(
){
-
var dom =$(
'[data-label=test]').
get(
0);
-
var myChart = echarts.
init(dom);
-
-
-
var option = {
-
将复制的代码放到这里。
-
};
-
-
-
if (option &&
typeof option ===
"object"){
-
myChart.
setOption(option,
true);
-
}},
800);
Echarts完整代码：(建议先在代码编译器写好代码，在放入Axure中)
-
javascript:
-
var script =
document.
createElement(
'script');
-
script.
type =
"text/javascript";
-
script.
src =
"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
-
document.
head.
appendChild(script);
-
setTimeout(
function(
){
-
var dom =$(
'[data-label=Highchartsbingtu]').
get(
0);
-
var myChart = echarts.
init(dom);
-
-
-
var option = {
-
title: {
-
text:
'Referer of a Website',
-
subtext:
'Fake Data',
-
left:
'center'
-
},
-
tooltip: {
-
trigger:
'item'
-
},
-
legend: {
-
orient:
'vertical',
-
left:
'left'
-
},
-
series: [
-
{
-
name:
'Access From',
-
type:
'pie',
-
radius:
'50%',
-
data: [
-
{
value:
1048,
name:
'Search Engine' },
-
{
value:
735,
name:
'Direct' },
-
{
value:
580,
name:
'Email' },
-
{
value:
484,
name:
'Union Ads' },
-
{
value:
300,
name:
'Video Ads' }
-
],
-
emphasis: {
-
itemStyle: {
-
shadowBlur:
10,
-
shadowOffsetX:
0,
-
shadowColor:
'rgba(0, 0, 0, 0.5)'
-
}
-
}
-
}
-
]
-
};
-
-
-
if (option &&
typeof option ===
"object"){
-
myChart.
setOption(option,
true);
-
}},
800);
效果：
Highcharts：
也是同样的道理，只是代码不同。把复制的代码放入function HighchartsInit方法体中。
-
javascript:
-
$.
getScript(
'http://cdn.highcharts.com.cn/highcharts/highcharts.js',
function(
){
-
var dom =$(
'[data-label=Charts]').
get(
0);
-
HighchartsInit(dom)
-
}
-
);
-
-
function
HighchartsInit(
dom)
-
{
-
-
});
-
}
注意：Highcharts代码，把'container'改成dom,两边的引号也要去掉;
最终代码：
-
javascript:
-
$.
getScript(
'http://cdn.highcharts.com.cn/highcharts/highcharts.js',
function(
){
-
var dom =$(
'[data-label=Highchartsbingtu]').
get(
0);
-
HighchartsInit(dom)
-
}
-
);
-
-
function
HighchartsInit(
dom)
-
{
-
Highcharts.
chart(dom, {
-
chart: {
-
plotBackgroundColor:
null,
-
plotBorderWidth:
null,
-
plotShadow:
false,
-
type:
'pie'
-
},
-
title: {
-
text:
'2018 年浏览器市场份额'
-
},
-
tooltip: {
-
pointFormat:
'{series.name}: <b>{point.percentage:.1f}%</b>'
-
},
-
plotOptions: {
-
pie: {
-
allowPointSelect:
true,
-
cursor:
'pointer',
-
dataLabels: {
-
enabled:
false
-
},
-
showInLegend:
true
-
}
-
},
-
series: [{
-
name:
'Brands',
-
colorByPoint:
true,
-
data: [{
-
name:
'Chrome',
-
y:
61.41,
-
sliced:
true,
-
selected:
true
-
}, {
-
name:
'Internet Explorer',
-
y:
11.84
-
}, {
-
name:
'Firefox',
-
y:
10.85
-
}, {
-
name:
'Edge',
-
y:
4.67
-
}, {
-
name:
'Safari',
-
y:
4.18
-
}, {
-
name:
'Other',
-
y:
7.05
-
}]
-
}]
-
});
-
}
效果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
