问题描述
我想使用JS库开发一个交互式图表....在这个图表中我想有按钮(在图表内),以这种方式(红色)...
我也想更改线型(例如点线)。
我试过Morris.js,但是这个lib不允许我做我想做的...
谢谢
p>这可以用 Morris.js
,但是你需要添加一些代码到Morris(最新版本0.5.1)以绘制虚线:
扩展Morris并添加一个名为 lineStyle
的参数,并将此参数设置为。
请参阅对于raphael.js行样式的可能值:
[, - ,。 , - ..,。 , - , - , - 。, - 。, - ..]
在 mouseover
解决方案:
(function(){var $,MyMorris; MyMorris = window.MyMorris = {}; $ = jQuery; MyMorris = Object.create(Morris); MyMorris.Grid.prototype.gridDefaults [lineStyle] =; MyMorris.Line.prototype.drawLinePath = function(path,lineColor,lineIndex){ return this.raphael.path(path).attr('stroke',lineColor).attr('stroke-width',this.lineWidthForSeries(lineIndex))。attr('stroke-dasharray',this.options.lineStyle); };})。call(this); Morris.Area({element:'chart',data:[{y:'LUN',a:1,b:2},{y:'MAR',a:2 ,b:3},{y:'MER',a:4,b:2},{y:'JEU',a:2,b:1},{y:'VEN' :{y:'SAM',a:4,b:3},{y:'DIM',a:1,b:2}],xkey:'y',ykeys: 'b'],labels:['Label 1','Label 2'],fillOpacity:0.6,hideHover:'auto',behaveLikeLine:true,resize:true,pointFillColors:['#ffffff'],pointStrokeColors:黑色'],lineColors:['gray','blue'],lineStyle:。,parseTime:false,smooth:false,hoverCallback:function(index,options,content,row){var currentDiv = var finalContent = $(< div />); $(content).each(function(){currentDiv = $(this); $(finalContent).append(currentDiv);}); var btnEdit = $(< img />)。attr(src,http://i.stack.imgur.com/Z2AxP.png).addClass(morrisEdit).css({ cursor:pointer})。attr(onclick,editAction();); $(finalContent).append(btnEdit); return finalContent; }}); function editAction(){alert(Edit Clicked); // Do some actions}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><script src =// cdnjs.cloudflare.com/ajax/libs /raphael/2.1.0/raphael-min.js\"> ;<script> ;<script src =http://cdn.oesmith.co.uk/morris-0.5.1.min.js> < / script>< link href =http://cdn.oesmith.co.uk/morris-0.5.1.css =stylesheet/>< div id =chart>< ; / div>
静态解决方案:
(function(){var $,MyMorris; MyMorris = window.MyMorris = {}; $ = jQuery; MyMorris = Object.create(Morris); MyMorris.Grid .prototype.gridDefaults [lineStyle] =; MyMorris.Line.prototype.drawLinePath = function(path,lineColor,lineIndex){return this.raphael.path(path).attr('stroke',lineColor).attr ('stroke-width',this.lineWidthForSeries(lineIndex))。attr('stroke-dasharray',this.options.lineStyle); };})。call(this); var data = [{y:'LUN',a:1,b:2},{y:'MAR',a:2,b:3} M'',a:0,b:2},{y:'JEU',a:2,b:1},{y:'VEN',a:2,b:2} ,a:0,b:0},{y:'DIM',a:1,b:2}]; Morris.Area({element:'chart',data:data,xkey:'y',ykeys: ['a','b'],labels:['Label 1','Label 2'],fillOpacity:0.6,hideHover:'auto',behaveLikeLine:true,resize:true,pointFillColors:['#ffffff'] ,pointStrokeColors:['black'],lineColors:['gray','blue'],lineStyle:。,parseTime:false,smooth:false,}); var indexNulls = []; for ; i
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><script src =// cdnjs.cloudflare.com/ajax/libs /raphael/2.1.0/raphael-min.js\"> ;<script> ;<script src =http://cdn.oesmith.co.uk/morris-0.5.1.min.js> < / script>< link href =http://cdn.oesmith.co.uk/morris-0.5.1.css =stylesheet/>< div id =chart>< ; / div>< div id =editsstyle =width:100%; margin-top:-150px; position:relative;>
div>
I want to develop an interactive chart using a JS library .... in this chart I want have buttons (inside the chart), in this way (in red) ...
I want also to change the line type (dotted for example).
I tried Morris.js but this lib is not allowing me to do what I want to do ...
Is there any other library that I can use instead ?
Thank you
解决方案 That's possible with Morris.js
, but you need to add some code to Morris (latest version 0.5.1) to draw dotted lines:
Extend Morris and add a parameter called lineStyle
and set this parameter to .
in the Morris Area configuration.
See this answer for the possible values for raphael.js line style:
["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
On mouseover
solution:
(function () {
var $, MyMorris;
MyMorris = window.MyMorris = {};
$ = jQuery;
MyMorris = Object.create(Morris);
MyMorris.Grid.prototype.gridDefaults["lineStyle"] = "";
MyMorris.Line.prototype.drawLinePath = function(path, lineColor, lineIndex) {
return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex)).attr('stroke-dasharray', this.options.lineStyle);
};
}).call(this);
Morris.Area({
element: 'chart',
data: [
{ y: 'LUN', a: 1, b: 2 },
{ y: 'MAR', a: 2, b: 3 },
{ y: 'MER', a: 4, b: 2 },
{ y: 'JEU', a: 2, b: 1 },
{ y: 'VEN', a: 2, b: 2 },
{ y: 'SAM', a: 4, b: 3 },
{ y: 'DIM', a: 1, b: 2 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Label 1', 'Label 2'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'blue'],
lineStyle: ".",
parseTime: false,
smooth: false,
hoverCallback: function (index, options, content, row) {
var currentDiv = "";
var finalContent = $("<div/>");
$(content).each(function () {
currentDiv = $(this);
$(finalContent).append(currentDiv);
});
var btnEdit = $("<img/>").attr("src", "http://i.stack.imgur.com/Z2AxP.png").addClass("morrisEdit").css({"cursor":"pointer"}).attr("onclick", "editAction();");
$(finalContent).append(btnEdit);
return finalContent;
}
});
function editAction() {
alert("Edit Clicked");
// Do some actions
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/>
<div id="chart"></div>
Static solution:
(function () {
var $, MyMorris;
MyMorris = window.MyMorris = {};
$ = jQuery;
MyMorris = Object.create(Morris);
MyMorris.Grid.prototype.gridDefaults["lineStyle"] = "";
MyMorris.Line.prototype.drawLinePath = function (path, lineColor, lineIndex) {
return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex)).attr('stroke-dasharray', this.options.lineStyle);
};
}).call(this);
var data = [
{ y: 'LUN', a: 1, b: 2 },
{ y: 'MAR', a: 2, b: 3 },
{ y: 'MER', a: 0, b: 2 },
{ y: 'JEU', a: 2, b: 1 },
{ y: 'VEN', a: 2, b: 2 },
{ y: 'SAM', a: 0, b: 0 },
{ y: 'DIM', a: 1, b: 2 }
];
Morris.Area({
element: 'chart',
data: data,
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Label 1', 'Label 2'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'blue'],
lineStyle: ".",
parseTime: false,
smooth: false,
});
var indexNulls = [];
for (var i = 0; i < data.length; i++) {
if (data[i].a == 0 || data[i].b == 0) {
indexNulls.push(i);
}
}
for (var i = 0; i < indexNulls.length; i++) {
var circleElement = $("#chart").find("circle")[indexNulls[i]];
var divPosition = $(circleElement).attr("cx") - 20;
$divEdit = $("<div/>").css({ "display": "inline-block", "position": "absolute", "left": divPosition + "px" });
$btnEdit = $("<img/>").attr("src", "http://i.stack.imgur.com/Z2AxP.png").addClass("morrisEdit").css({ "cursor": "pointer" }).attr("onclick", "editAction();");
$divEdit.append($btnEdit);
$("#edits").append($divEdit);
}
function editAction() {
alert("Edit Clicked");
// Do some actions
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/>
<div id="chart"></div>
<div id="edits" style="width: 100%; margin-top: -150px; position: relative;">
这篇关于将按钮添加到图表 - svg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!