2

Googleチャートの実装に少し問題があります。要件に従って、二重の y 軸が必要であり、y 軸のバーが重なっている必要があります。私のコードで次の出力を達成しました：

ここに画像の説明を入力

最後の 2 つのバーの 2 つの青い矢印に注目してください。青いバーは、小さいほど赤いバーの後ろに隠れています。実際には次のようになります。

ここに画像の説明を入力

これはjsファイルの私のコードです:

var chart, data;

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart()
{
    // Create the data table.
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addColumn('number', 'pieces');
    data.addColumn('number', 'ratio');
    data.addColumn('number', 'ratio2');
    data.addRows([
      ['Mushrooms', 300, 200, 50, 1],
      ['Onions', 100, 244, 4, 3],
      ['Olives', 100, 400, 56, 10]
    ]);

    // Set chart options
    options = {
        chartType:"ComboChart",
        containerId:"visualization",
        stackSeries: true,
        isStacked : true,
        seriesDefaults: {

            rendererOptions: {
                barPadding: 0,
                barMargin: 10
            },
            pointLabels: {
                show: true,
                stackedValue: true
            }
        },
        grid: {
            background: '#272424',
            drawGridlines: false
        },
        seriesType: "bars",     
        series: {
                    0: {
                          targetAxisIndex: 0
                      },
                      1: {
                          targetAxisIndex: 1
                      },
                      2: {
                          targetAxisIndex: 1,
                          type: "line"
                      },
                      3: {
                          type: "line"
                      }

                },   
                hAxis:{

                },         
                vAxes: {
                    0: {           
                        title: "Slices",                 
                        label:'Slices',    
                        type:'bars'                        
                    },
                    1: {
                        title: "pieces", 
                        label:'pieces',
                        type:'bars'
                    },
                    2: {
                        title: "ratio,",
                        label:'ratio',
                        type:'line'
                    },
                    3: {
                        title: "ratio2,",
                        label:'ratio2',
                        type:'line'
                    }

                }
        };

    // Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'select', selectionHandler);
}

function selectionHandler() {
    var selectedData = chart.getSelection(), row, item;
    if(selectedData != '')
    {
        row = selectedData[0].row;
        item = data.getValue(row,3);
        alert("You selected :" + item);         
    }
}

誰かが私にこれについてどうすればよいか教えてもらえますか? どんな助けでも大歓迎です。

4

2 に答える 2

2

バーを別々の軸に表示しています:

                0: {
                      targetAxisIndex: 0
                  },
                  1: {
                      targetAxisIndex: 1
                  },
                  2: {
                      targetAxisIndex: 1,
                      type: "line"
                  },
                  3: {
                      type: "line"
                  }

したがって、最初のバーは左軸にあり、2 番目のバーは右軸にあります。最初のバーは、その前の赤いバーよりも高いため、表示されます。これは仕様によるものです。それらを積み重ねて表示する場合は、コードを次のように変更します。

  0: {
    targetAxisIndex: 0
  },
  1: {
    targetAxisIndex: 0
  },
  2: {
    targetAxisIndex: 1,
    type: "line"
  },
  3: {
    targetAxisIndex: 1,
    type: "line"
  }

これは次のようになります。

サンプル積み上げ棒グラフ

2 つの軸のサイズが等しくないことに注意してください。必要に応じて他のパラメータを調整します。横に並べたい場合は、同じ軸に置いてから外すisStacked: trueと、隣同士に立つことができます。

注: この種のグラフは非常に混雑しており、視覚化の方法としては適していません。とにかく、グラフを作成する必要がある場合は、上記のソリューションが機能するはずです。小さいバーを前面に表示したいというのであれば、SVG 編集で頑張ってください。

于 2013-09-26T08:36:18.833 に答える
2

実際には、DataView を使用して青色のデータ シリーズを 2 つに分割することで、必要なものを取得する方法があります。データが赤の系列よりも大きい系列を 1 つと、赤の系列以下の系列を 1 つ作成し、それらを (順番に) より大きい、赤、より小さい位置に配置します。シリーズ オプションで、この新しいシリーズを最初のシリーズと同じ色に設定し、インデックスから非表示にします。

使用する DataView は次のとおりです。

var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        return (val > dt.getValue(row, 2)) ? val : null;
    }
}, 2, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        return (val <= dt.getValue(row, 2)) ? val : null;
    }
}, 3, 4]);

シリーズオプションは次のとおりです。

series: {
    0: {
        targetAxisIndex: 0
    },
    1: {
        targetAxisIndex: 1
    },
    2: {
        targetAxisIndex: 0,
        visibleInLegend: false,
        color: '#3366cc' // matches series 0
    },
    3: {
        targetAxisIndex: 1,
        type: "line"
    },
    4: {
        type: "line"
    }
}

DataTable の代わりにビューを使用してグラフを描画します。

chart.draw(view, options);

ここで動作することを確認してください：http://jsfiddle.net/asgallant/4jhC5/

于 2013-09-26T14:19:48.603 に答える