Добавление кнопок в диаграмму - svg

Question

Я хочу разработать интерактивную диаграмму с использованием библиотеки JS. В этой схеме я хочу иметь кнопки (внутри диаграммы), таким образом (красным цветом):

Я хочу также, чтобы изменить тип линии (пунктир, например).

Я пробовал Morris.js, но эта библиотека не позволяет мне делать то, что я хочу делать.

Есть ли другая библиотека, которую я могу использовать вместо этого?

Answer 1

Это возможно с Morris.js, но вам нужно добавить код Моррису (последняя версия 0.5.1), чтобы нарисовать пунктирные линии:

Продлить Моррис и добавить параметр, называемый lineStyle и установить этот параметр, чтобы . в конфигурации Морриса.

См this answer возможные значения для стиля Raphaël.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', 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;">