Question

我正在尝试使用HighCharts复制此图表。链接到图片 - https://www.fas.org/irp/doddir/army/figure7.htm

编辑：可能我应该解释下面的图表。下面的图表显示了24小时时间窗口内发生的所有事件，并分为7天。图表中的每个同心圆对应于一周中的一天，每个扇区对应于一周中那一天的一小时。例如，从下面的图表中可以看出，凌晨3点到凌晨4点之间只发生了2起事件，其中一个事件发生在星期五，第二个事件发生在星期天。

enter image description here

我创建的最接近的是 - http://jsfiddle.net/bluechips23/ssywnc42/4/

jsfiddle链接的高图设置如下：

$(function () {
var daysOfWeek = ["M","T","W","TH","F","S","SU"];

$('#container').highcharts({

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: -10,
        endAngle: 350
    },

    xAxis: {
        tickInterval: 15,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                if(this.value == 0) {
                    return 24;
                } else {
                    return this.value*24/360;
                }
            }
        }
    },

    yAxis: {
        min: -10,
        tickInterval: 20,
        labels: {
            y:-10,
            x:5,
            formatter: function() {
                return daysOfWeek[this.value/20];
            }
        }
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 30
        },
        bubble: {
            minSize: 5,
            maxSize: 10
        }
    },

    series: [{
        type: 'bubble',
        name: 'Monday',
        data: [[25,20,5],[55,20,10],[95,20,5],[125,20,7],[160,20,9],
              [190,20,5],[220,20,8]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Tuesday',
        data: [[35,40,5],[65,40,10], [95,40,9],[125,40,8],[155,40,5],
              [190,40,7]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Wednesday',
        data: [[82,60,10], [188,60,8],[217,60,6]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Thursday',
        data: [[38,80,10],[68,80,8], [200,80,5]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Friday',
        data: [[23,100,10], [95,100,7],
               [172,100,10],[235,100,10]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Saturday',
        data: [[172,120,10],[218,120,10], [260,120,10]],
        pointPlacement: 'between'
    },
            {
        type: 'bubble',
        name: 'Sunday',
        data: [[232,140,10],[247,140,10], [280,140,5],[67,140,8],[325,140,7]],
        pointPlacement: 'between'
    }]
});});

我不需要显示不同类型的事件 - 只有一种类型的事件，如上面的jsfiddle链接所示，对我来说很有用。

但是，我不确定如何实现以下内容：

如何开始我的＆＃39; M＆＃39; （y轴）与中心有一点间隙，所以它更容易辨认 - 类似于上图所示中心有一个迷你圈。
我如何移动＆＃39;蜱中间的小时数？马上，＆＃39; 24＆＃39;，＆＃39; 1＆＃39;等出现在滴答声之上 - 我该怎么做把它们放在蜱之间？
如何显示一周中的日期（＆＃39; M＆＃39;，＆＃39; T＆＃39;，＆＃39; W＆＃39;等）介于＆＃24;＆＃39;之间和＆＃39; 1＆＃39;？现在他们介于＆＃39; 23＆＃39;和＆＃39; 24＆＃39;一世试图设置＆＃39; x＆＃39;价值为＆＃39; 5＆＃39;在yAxis.labels但如果你注意到，只有＆＃39; M＆＃39;并且可能是＆＃39; T＆＃39;是中心的，其余的都是倾斜的。

编辑2 - 解决方案：更新图表以尽可能接近地表示24小时时间事件图表。我意识到，只要很明显事件发生在几小时之间，就不需要轮换时间。同样，这些日子的事件可能发生在Y轴上，而不是在线之间，就像在我的情况下，我只显示某一时间之间每天的事件数量。

我解决的最重要的问题（对于我的项目）是在中间创建一个白色圆圈（感谢Sebastian建议使用自定义渲染器） - 早期的图表（上面的链接）可以工作但它只是看起来在原点太拥挤了。现在看起来不错了。

这里是JSFiddle链接到更新的图表，以防将来有人有类似的问题。 http://jsfiddle.net/bluechips23/ssywnc42/8/（在全屏模式下或最大化结果区域时看起来更好）。

Answer 1

您的图表不是默认值，因此您需要使用renderer自定义它以添加自定义形状。每个位置都可以在xAxis刻度位置上计算（每个位置都将此值保留为像素）。

使用HighCharts的24小时时间事件图表

1 个答案: