将按钮添加到图表 - svg [英] Adding buttons to a chart - svg

问题描述

我想使用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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！