Question

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

Answer 1

是的，这是非常有可能的。我建议使用HighStock作为其图表，它具有更好的时间序列数据功能。

以下是如何在highstock中执行此操作，只需将导航器的系列类型设置为“column”

即可

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

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

所有的说法同样可以在highcharts中完成，主要的细节图表有多个图表的组合，主要与highstock中的导航器相同，细节是主要图表，所以你也可以把主人的系列类型设置为“列”，你就完成了，摆弄了@ 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
}
});

在Stackoverflow样式中制作主 - 细节高图

1 个答案: