当前位置： 文江博客 话题详情

使用 Highcharts.js 创建打孔卡样式图表

发布于 2025-01-06 01:17:22 字数 321 浏览 1 评论 0 原文

我想通过 highcharts 复制 github 上呈现的“打孔卡”样式图。

GitHub 打孔卡图

我真的很难解决这个问题，这里有一个 jsfiddle 开始让我到达那里。我宁愿在 y 上花几天时间，在 x 上花时间，但我不知道应该如何去做这件事。

任何帮助表示赞赏。

蒂亚！

原文

I'd like to replicate the "punch-card" style graph presented on github via highcharts.

GitHub Punch Card Graph

I'm really struggling with this one, here's a jsfiddle that starts to get me there. I'd rather have days on the y and time on the x, but I'm at a loss at to how I should go about doing this.

Any help appreciated.

TIA!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

匿名。 2025-01-13 01:17:22

我无法翻转轴，但为你解决了很多问题。

HTML：

<div id="container" style="height: 400px"></div>

JS：

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    defaultSeriesType: 'scatter'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {

},
plotOptions: {
    scatter: {
        marker: {
            radius: 4,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        }
    }
},
series: [{
    data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}]
}]
});

I was not able to flip the axis but sorted out a lot of things for you.

HTML:

<div id="container" style="height: 400px"></div>

JS:

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    defaultSeriesType: 'scatter'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {

},
plotOptions: {
    scatter: {
        marker: {
            radius: 4,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        }
    }
},
series: [{
    data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}]
}]
});
回复 原文
山有枢 2025-01-13 01:17:22

我想现在已经太晚了，但也许这个解决方案会帮助处于相同情况的其他人。

这是我的解决方案：

$(function () {
  $('#container').highcharts({

    chart: {
      defaultSeriesType: 'scatter'
    },

    title: {
      text: 'Punchcard'
    },

    xAxis: {
      type: "datetime",
        dateTimeLabelFormats: {
        hour: '%I %P'  
      },
      tickInterval: 3600000 * 1
    },

    yAxis: {
      categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    },

    series: [{
      data: [

        {y: 0, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 0, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 1, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 1, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 2, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 2, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 3, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 3, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 4, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 4, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 5, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 5, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 6, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 6, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

      ]
    }]

  });

});

这是演示： http://jsfiddle.net/KmPJE/1/

让我知道这是否适合您。

I guess it's to late now but maybe this solution will help other people in the same situation.

Here is my solution:

$(function () {
  $('#container').highcharts({

    chart: {
      defaultSeriesType: 'scatter'
    },

    title: {
      text: 'Punchcard'
    },

    xAxis: {
      type: "datetime",
        dateTimeLabelFormats: {
        hour: '%I %P'  
      },
      tickInterval: 3600000 * 1
    },

    yAxis: {
      categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    },

    series: [{
      data: [

        {y: 0, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 0, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 1, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 1, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 2, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 2, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 3, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 3, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 4, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 4, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 5, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 5, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 6, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 6, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

      ]
    }]

  });

});

And here is the demo: http://jsfiddle.net/KmPJE/1/

Let me know if that works for you.

回复 原文
跨年 2025-01-13 01:17:22

我从@mangobug 更新了 jsFiddle 来指导您以更接近的方式做您想做的事情

I updated the jsFiddle from @mangobug to guide you to a closer way of doing what you want

回复 原文
~没有更多了~

关于作者

公布

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文