使用Highcharts.js创建打卡式样图 [英] Using Highcharts.js to create a punch card style graph

问题描述

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

我真的很在意这个，这是一个 jsfiddle 开始让我在那里。我宁愿在x上花上几天时间，但是我很在意如何去做这件事。

任何帮助表示赞赏。

TIA！

解决方案

我无法翻转但为你分类了很多东西。

HTML：

 < div id =containerstyle =height：400px>< / div> 
  

JS：

  var chart = new Highcharts.Chart（{
图表：{
 renderTo：'container'，
 defaultSeriesType：'scatter'
'，
 
 xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'八月'，'九月'，'十月'，'十一月'，'十二月'] 
}，
 yAxis：{
 
}，
 plotOptions：{
 scatter：{
 marker：{
 radius：4，
 states：{
 hover：{
 enabled：true，
 lineColor：' rgb（100,100,100）'
} 
} 
}，
表示：{
盘旋：{
标记：{
启用：false 
} 
} 
} 
} 
}，
系列：[{
 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'd like to replicate the "punch-card" style graph presented on github via highcharts.

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!

解决方案

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}]
}]
});

这篇关于使用Highcharts.js创建打卡式样图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！