highcharts - 以 Stackoverflow 风格制作主细节 Highchart

Question

我遇到了 Highcharts 演示库，其中 Highcharts 的主详细信息图表看起来与 Stackoverflow 中提供的用户信誉图非常相似。有一个区别，Stackoverflow 中的一个以竖线的形式显示详细图表，而 Highcharts 演示库中的一个是连续图的形式。有什么选项可以将详细地图更改为竖条类型吗？

Answer 1

是的，很有可能。我建议使用 HighStock 代替它作为对时间序列类型数据具有更好功能的图表。

这是您在 highstock 中的操作方法，只需将导航器的系列类型设置为“列”

  navigator: {
        series: {
            data: ADBE,
            type : 'column'
        }
    },

http://jsfiddle.net/bLqL3/1/
PS：我只将其中一个折线图（下）更改为列，而将另一个作为练习；）

上面说的同样在highcharts中也可以做到，master detail chart有多个图表的组合，master和highstock中的navigator一样，detail是主图，所以你可以将主人的系列类型设置为“列”，你就完成了，摆弄@ http://jsfiddle.net/RAXa3/1/

    series: [{
                type: 'column',
                name: 'USD to EUR',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2006, 0, 01),
                data: data
            }],

您可以探索声誉图表脚本来挖掘您的解决方案

new Highcharts.Chart({
chart: {
    renderTo: "master-graph",
    animation: !1,
    reflow: !1,
    borderWidth: 0,
    marginLeft: 62,
    backgroundColor: null,
    zoomType: "x",
    events: {
        selection: function(a){
            varb=a.xAxis[
                0
            ],
            a=b.min,
            b=b.max,
            c=this.xAxis[
                0
            ];c.removePlotBand("selected-area");c.addPlotBand({
                id: "selected-area",
                from: a,
                to: b,
                color: "rgba(0, 70, 200, 0.2)"
            });e(this);return!1
        }
    }
},
series: [
    {
        data: i,
        type: "column",
        color: "green"
    }
],
plotOptions: {
    series: {
        animation: !1,
        lineWidth: 1,
        marker: {
            enabled: !1
        },
        shadow: !1,
        states: {
            hover: {
                lineWidth: 1
            }
        },
        enableMouseTracking: !1
    },
    column: {
        borderWidth: 0,
        pointPadding: 0,
        groupPadding: 0
    }
},
xAxis: {
    type: "datetime",
    min: a,
    max: p,
    maxZoom: 2592E6,
    plotBands: [
        {
            id: "selected-area",
            from: h,
            to: p,
            color: "rgba(0, 70, 200, 0.2)"
        }
    ],
    title: {
        text: null
    },
    labels: {
        formatter: function(){
            returnHighcharts.dateFormat(7776E6<p-a?"%b '%y": "%b %e",
            this.value,
            !1)
        }
    },
    lineWidth: 0
},
yAxis: {
    gridLineWidth: 0,
    labels: {
        enabled: !1
    },
    title: {
        text: null
    },
    plotLines: b(),
    min: j,
    max: m,
    showFirstLabel: !1,
    endOnTick: !1,
    startOnTick: !1
},
title: {
    text: null
},
legend: {
    enabled: !1
},
tooltip: {
    formatter: function(){
        return!1
    }
},
credits: {
    enabled: !1
},
exporting: {
    enabled: !1
}
});

和

new Highcharts.Chart({
chart: {
    renderTo: "detail-graph",
    animation: !1,
    defaultSeriesType: "column"
},
series: [
    {
        name: "rep",
        data: g,
        color: "green"
    }
],
plotOptions: {
    series: {
        animation: !1,
        cursor: "pointer",
        allowPointSelect: !0,
        shadow: !1,
        stickyTracking: !0,
        states: {
            hover: {
                enabled: !0,
                brightness: 0.5
            }
        }
    },
    column: {
        pointPadding: 0.03,
        groupPadding: 0,
        borderWidth: 0,
        events: {
            click: c
        }
    }
},
xAxis: {
    type: "datetime",
    labels: {
        rotation: 0,
        formatter: function(){
            returnHighcharts.dateFormat("%b %e",
            this.value,
            !1)
        }
    },
    lineWidth: 0,
    min: f,
    max: d,
    startOnTick: !0,
    endOnTick: !0
},
yAxis: {
    gridLineWidth: 0,
    plotLines: b(),
    min: e,
    max: h,
    title: {
        text: "reputation per day"
    },
    startOnTick: !1,
    endOnTick: !1
},
tooltip: {
    formatter: function(){
        return'<spanstyle="font-size: 10px;">'+Highcharts.dateFormat("%A, %B %e, %Y",
        this.point.x,
        !1)+'</span><br/><spanstyle="color:'+this.series.color+'">'+this.series.name+"</span>: <b>"+this.point.realRep+"</b>"
    },
    style: {
        lineHeight: "200%",
        padding: 10
    }
},
title: {
    text: null
},
legend: {
    enabled: !1
},
credits: {
    enabled: !1
}
});