1

選択したグラフの種類 (折れ線/縦棒/散布図など) に応じて、1 回のレンダリングで複数のオプション設定を使用できますか? たとえば、次の 2 つのグラフ タイプがあります。

var options = {
    chart: {
        renderTo: 'container',
        type: 'column',
    },
    title: {
        text: title
    },
    subtitle: {
        text: subtitle
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Percentage'
        }
    },
    legend: {
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        shadow: true
    },
    tooltip: {
        formatter: function () {
            return Math.round(this.y * 100) + '%';
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: []
};

と：

var options = {
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    title: {
        text: title
    },
    subtitle: {
        text: subtitle
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count'
        }
    },
    tooltip: {
        formatter: function () {
            var s = '';

            $.each(this.points, function (i, point) {
                s += point.series.name + ': ' + point.y + '<br/>';
            });
            return s;
        },
        shared: true
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 100,
    borderWidth: 0
},
series: []
};

$(document).on("click", ".render-Chart", function () {...}それらを 1 つまたはのように組み合わせることは可能var chartですか? ありがとうございました！

4

1 に答える 1

2

質問がよくわかりませんでした。しかし、質問が「それは可能ですか？」それなら、直接やってみませんか。試してみて期待どおりにならなかった場合は、ここに戻って jsFiddle を試してみて、期待される動作と実際の動作を比較してください。

あなたが求めているのは、線と列の2つのチャートオプションがあり、どちらも同じコンテナを指しており、クリックまたは条件に基づいて線または列をプロットしたいが、両方ではない場合ははい非常に可能です。両方のオプションで同じコンテナ ID に言及したために競合が発生したのではないかと心配している場合は、オプション自体はデータ/情報を格納する単なる変数であり、DOM を変更したり、それ自体を実行したりしないことに注意してください。これらをパラメーターとして受け取り、チャートをプロットする Highchart のコンストラクター。コンストラクターが 1 回だけ呼び出される限り、同じコンテナーを n 回使用しても安全である必要があります。そうしないと、最新のコンストラクターのチャートがそのコンテナーにプロットされます。

var lineOptions = {
    chart: {
        type: 'line',
        renderTo: 'container',
        //...
    }
    //...
};

var columnOptions = {
    chart: {
        type: 'column',
        renderTo: 'container',
        //...
    }
    //...
};
//...
var chart;
function onClick(){
    if(...){
        chart = new Highcharts.StockChart(lineOptions);
    }else if(...){
        chart = new Highcharts.StockChart(columnOptions);
    }       
}
于 2012-09-09T06:29:12.660 に答える