Highcharts 以Stackoverflow样式制作主细节Highchart

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

是的，非常有可能。我建议使用HighStock，因为它是一种对timeseries类数据具有更好功能的图表

下面是在highstock中的操作方法，只需将导航器的series类型设置为“column”

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

PS：我只将一个折线图（下方）更改为列，并将另一个作为练习；）

所有这些都可以在highcharts中实现，master detail图表有多个图表的组合，master与highstock中的navigator相同，detail是主图表，因此您也可以将master的系列类型设置为“column”，这样您就完成了，Fiddle@

您可以研究声誉图表脚本来找出您的解决方案

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

newhighcharts.Chart({
图表：{
renderTo：“主图形”，
动画：！1，
回流焊：！1，
边框宽度：0，
marginLeft:62，
背景颜色：空，
zoomType:“x”，
活动：{
选择：功能（a）{
varb=a.xAxis[
0
],
a=b.min，
b=b.max，
c=此.xAxis[
0
]；c.删除绘图带（“选定区域”）；c.添加绘图带({
id:“选定区域”，
发件人：a，
致:b,，
颜色：“rgba（0,70,200,0.2）”
})（这个）；返回
}
}
},
系列：[
{
数据：我，
键入：“列”，
颜色：“绿色”
}
],
打印选项：{
系列：{
动画：！1，
线宽：1，
标记：{
已启用：！1
},
影子：！1，
国家：{
悬停：{
线宽：1
}
},
enableMouseTracking:！1
},
专栏：{
边框宽度：0，
点填充：0，
分组填充：0
}
},
xAxis：{
键入：“日期时间”，
敏：a，
马克斯：p，
maxZoom:2592E6，
绘图带：[
{
id:“选定区域”，
发件人：h，
致:p,，
颜色：“rgba（0,70,200,0.2）”
}
],
标题：{
文本：空
},
标签：{
格式化程序：函数（）{
returnHighcharts.dateFormat（7776E6Wow，这是一个很好的答案！非常感谢！嗯，你在JSFIDLE中的Highstock演示仍然在主图形中显示连续图形。同样，你在FIDLE中的Highcharts演示也是如此！是的，默认的导航器也是连续的：）所以我想我会改变其中一个图表，把另一个留作练习；）为你更新答案中的链接，看看我对一个类似问题的回答：是的，这就是我要找的。
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
}
});