文章/答案/技术大牛

发布

社区首页 >问答首页 >Morris.js面积图定制

问Morris.js面积图定制
EN

Stack Overflow用户

提问于 2014-12-30 07:33:30

回答 1查看 3.1K关注 0票数 1

我需要一个像这样的图表，有人能帮我提供小提琴的工作例子吗？

我目前的代码是：

initCharts: function() {
        if (Morris.EventEmitter) {
            // Use Morris.Area instead of Morris.Line
            dashboardMainChart = Morris.Area({
                element: 'sales_statistics',
                padding: 15,
               // behaveLikeLine: false,
               gridEnabled: true,
               // gridLineColor: false,
                axes: true,
                fillOpacity: 0.3,
                data: [{
                    period: '2011 Q1',

                    profit: 0
                }, {
                    period: '2011 Q2',

                    profit: 20
                }, {
                    period: '2011 Q3',

                    profit: 50
                }, {
                    period: '2011 Q4',

                    profit: 40
                }, {
                    period: '2011 Q4',

                    profit: 60
                }],
                lineColors: ['#91C120'],
                xkey: 'period',
                ykeys: ['profit'],
                labels: ['Profit'],
                xLabels:['week'],
                pointSize: 5,
                pointFillColors: ['#FFF'],
                lineWidth: 3,
                hideHover: 'auto',
                resize: true
            });

        }
    }

第一个问题是，我想逐类使用图形目标元素，而不是id，因为我想在一个页面上多次使用它。

第二，我找不到像上面的图片那样在xLabels上放置日期的方法

第三，我希望网格与图像相似。

javascript

jquery

dom

svg

morris.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-11 06:36:24

您可以通过传递莫里斯一个jQuery或DOM对象来使用类而不是id。如果您传递给它一个字符串，它必须是一个id。所以你可以用这样一门课：

element:$('.yourClass'),

您可以使用xLabelFormat选项来使用一周中的几天，如下所示：

xLabelFormat: function (x) {
    let day = x.getDay(),
        days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    return days[day];
}

您可以使用css设置轴的文本颜色，并调整圆圈的笔画宽度。

circle{
  stroke-width: 4
}
tspan[dy]{
  stroke: #91C120
}

以下是完整的工作实例：

jQuery(document).ready(function() {
  let dashboardMainChart = Morris.Line({
    element: 'line-example',
    padding: 15,
    // behaveLikeLine: false,
    gridEnabled: true,
    // gridLineColor: false,
    axes: true,
    fillOpacity: 0.3,
    data: [{
      period: Date.parse('2015-01-01'),
      profit: 0
    }, {
      period: Date.parse('2015-01-02'),
      profit: 20
    }, {
      period: Date.parse('2015-01-03'),
      profit: 50
    }, {
      period: Date.parse('2015-01-04'),
      profit: 40
    }, {
      period: Date.parse('2015-01-05'),
      profit: 60
    }],
    lineColors: ['#91C120'],
    xkey: 'period',
    ykeys: ['profit'],
    labels: ['Profit'],
    xLabels: ['day'],
    pointSize: 5,
    pointFillColors: ['#FFF'],
    pointStrokeColors: ['#91C120'],
    lineWidth: 3,
    hideHover: 'auto',
    resize: true,
    xLabelFormat: function(x) {
      day = x.getDay();
      days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      return days[day];
    }
  });
})

circle {
  stroke-width: 4 !important;
}

tspan[dy] {
  stroke: #91C120 !important;
}

<!DOCTYPE html>
<html>

<head>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.4.1/morris.min.js" integrity="sha512-UcH7njmQ0j6gF7MPyIgpob6gjNGjLSvfOrujEg4s62riVtueN7H7d8ds5XyXbkTK7ClxG9L+VTb/zly84J9TZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <meta charset=utf-8 />
  <title>Morris.js Line Chart Example</title>
</head>

<body>
  <div id="line-example"></div>
</body>

</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27701347

复制

相似问题

问Morris.js面积图定制
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Morris.js面积图定制EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Morris.js面积图定制
EN