第一步,在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
}]
}]
});
}
效果: