-1
我想使用JS庫開發交互式圖表。在此圖表中我想有按鈕(在圖表內),以這種方式(紅色):將按鈕添加到圖表 - svg
我想也改變線路類型(虛線例如)。
我試過Morris.js,但這個庫不允許我做我想做的事。
有沒有其他的庫可以用來代替?
我想使用JS庫開發交互式圖表。在此圖表中我想有按鈕(在圖表內),以這種方式(紅色):將按鈕添加到圖表 - svg
我想也改變線路類型(虛線例如)。
我試過Morris.js,但這個庫不允許我做我想做的事。
有沒有其他的庫可以用來代替?
這可能與Morris.js
,但你需要添加一些代碼莫里斯(最新版本0.5.1)畫虛線:
擴展莫里斯,添加一個名爲lineStyle
參數,並在這個參數設置爲.
Morris區域配置。
爲raphael.js線條樣式的可能值見this answer:
["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
在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', 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() {
\t \t 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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="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 },
{ 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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="chart"></div>
<div id="edits" style="width: 100%; margin-top: -150px; position: relative;">
太感謝你了,你的答案幫助... 不過是有可能,按鍵仍然Morris.js顯示? – taboubim
不客氣。我一定會理解你的問題。你的意思是總是顯示編輯按鈕,不僅僅是鼠標懸停在上面? – krlzlx
是的......確切地說......不僅在鼠標上:) – taboubim