0

円グラフの作成に highcharts.js を使用しています。highcharts.js を使用して 5 つ以上の円グラフを作成する必要がありますが、1 つの問題で立ち往生しています。

私のページで1つのjavascriptを使用しているすべての円グラフに対して、1つのjavascriptのみを記述することで、使用しているようなすべての円グラフのdiv IDを指定できる可能性があります:

chart: {
            renderTo: 'container1',
            //borderRadius: 10,
            plotBackgroundColor: null,
            plotBorderWidth: 2,
            borderWidth: 0,
            plotShadow: false,

このように使用できますか:

chart: {
            renderTo: 'container1','container2','container3','container4'....
            //borderRadius: 10,
            plotBackgroundColor: null,
            plotBorderWidth: 2,
            borderWidth: 0,
            plotShadow: false,
4

3 に答える 3

1

いいえ。ドキュメントを調べたところ、HighCharts.jsrenderToは単一の HTML 要素しかサポートしていないようです。http://api.highcharts.com/highcharts#chart.renderTo

異なるデータセットを持つ 5 つの円グラフがあると仮定すると、同じグラフを複数の DIV 要素にロードしても意味がありません。

さまざまなチャートをロードするループを作成できます。

例えば：

function loadCharts(chartData){
    for(i=0; i<chartData.length; i++){
        var container = chartData[i]['container'];
        var myData = chartData[i]['myData'];

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: container,
                height: 400,
                plotBackgroundColor: null,
                plotBorderWidth: 2,
                borderWidth: 0,
                plotShadow: false
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            series: [{
                data: myData        
            }]
        });
    }
}

var highchartsdata = [{
    container: 'container1',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container2',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container3',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container4',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container5',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }];

loadCharts(highchartsdata);

これは私がテストしなかった例ですが、それがあなたの望む道なら、正しい道を歩むのに役立つはずです。

于 2012-09-05T18:49:17.417 に答える
0

上記のものは有効なJavaScript構文ではありません。

Highcharts APIのドキュメントを見ると、このように同時にレンダリングする複数の要素を指定する方法はないようです。一度に1つの要素である必要があります。最善の策は、ループでレンダリングを行うことです。

于 2012-09-05T18:48:02.520 に答える
0

ドキュメントからは不明ですが、Highcharts.setOptionsnew Highcharts.Chart({ ...options...})を使用すると、後続のすべてのチャートのデフォルト オプションを設定できるようになり、チャートを作成するために呼び出したときに上書きできます* 。

このライブラリをjQueryで使用している場合、次の構文を使用できるようです

$('#container1, #container2, #containerN').each(function(){
  new Highcharts.Chart({ chart:{ renderTo:this } });
})

編集: ...シリーズはチャートに提供できるオプションであるため、すべてのチャートで同じシリーズデータを使用すると問題ないように思われます。ただし、シリーズをデフォルトのオプションとして提供することを尊重していないようです。したがって、シリーズ データがデータとして要素上にある場合、

$('#container1, #container2, #containerN').each(function(){
  var $c = $(this);
  new Highcharts.Chart({ chart:{ renderTo:this }, series:$c.data() });
})

...データが適切な方法で添付されていると仮定します。$c.data()または、内のコンテンツに基づいてそのシリーズ オブジェクトを生成/検索/ロードすることは、.eachかなり賢明なようです。もちろん、実際に複数のチャートに同じシリーズのデータ​​を使用している場合は、次のように簡単に実行できます。

var s = ... // series value
$('#container1, #container2, #containerN').each(function(){
  new Highcharts.Chart({ chart:{ renderTo:this }, series:s });
});

私は彼らのドキュメントが提供するデモに基づいていくつかの簡単なコードマングリングを行いました.これはここにあります.

于 2012-09-05T19:15:25.200 に答える