从Y轴Morris折线图中删除点

时间:2017-01-09 10:51:01

标签: javascript jquery morris.js

我已使用以下代码实现了Morris Line Chart,这样做效果很好。

但我需要在目标的第二行名称中进行一些修改。你已经看到每个月出现点。我想从那条线上移除这些点,这样我就会成为一条直线。

Morris.Line({
  element: 'line-chart',
  data: JSON.parse(GraphData),
  xkey: 'title',
  ykeys: ['goal', 'actual'],
  labels: ['Goal', 'Actual'],
  xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
    var month = months[x.getMonth()];
    return month;
  },
  dateFormat: function(x) {
    var month = months[new Date(x).getMonth()];
    return month;
  },
  resize: true,
        lineColors: ['#ecb201', '#1B17BB'],
        gridTextFamily: "'Nunito', sans-serif",
        gridTextWeight: '300',
        gridTextSize: 11,
        gridTextColor: '#090b0d',
        pointSize: 4,
        lineWidth: 2,
        pointStrokeColors: ['#ffffff', '#ffffff'],
});

Morris Line Chart

2 个答案:

答案 0 :(得分:4)

尝试将pointSize更改为0.在开始时设置pointSiZe:0

Morris.Line({
    element: 'line-chart',
    pointSize: 0, ....
)}

答案 1 :(得分:1)

渲染图表后使用此脚本。

$(document).ready(function(){
        $('circle[fill="#ecb201"]').each(function(i,el) {
            //console.log($(this).attr("r" , 0));
            $(this).removeAttr("r");
            $(this).removeAttr("cy");
            $(this).removeAttr("cx");

        });
    });

但是在悬停时它会再次显示这些点数。这就是问题所在。