highcharts - Stackoverflow スタイルでマスター詳細ハイチャートを作成する

Question

Highcharts のデモ ギャラリーを見つけました。Highcharts のマスター詳細グラフは、Stackoverflow で提供されているユーザーの評判グラフと非常によく似ています。違いが 1 つあります。Stackoverflow のものは詳細なグラフを縦棒の形式で表示しますが、Highcharts デモ ギャラリーのものは連続グラフの形式です。詳細地図を縦棒タイプに変更できるオプションはありますか？

Answer 1

はい、可能性は大いにあります。代わりに、時系列の種類のデータに対してより優れた機能を備えたグラフとして HighStock を使用することをお勧めします。

ハイストックで行う方法は次のとおりです。ナビゲーターのシリーズタイプを「列」に設定するだけです

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

http://jsfiddle.net/bLqL3/1/
PS: 折れ線グラフ (下) の 1 つだけを列に変更し、もう 1 つを演習として残しました ;)

ハイチャートでも同じことを行うことができます。マスター詳細チャートには複数のチャートの組み合わせがあり、マスターはハイストックのナビゲーターと同じであり、詳細はメインチャートです。マスターのシリーズタイプを「列」に設定すると、完了です。@ 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
}
});