1

私は c3 のドキュメントと例に多くの時間を費やしましたが、API 関数を使用してチャートからカテゴリをアンロードまたは非表示にする方法を見つけることができませんでした。線や棒を削除するのは簡単ですが、x 軸のカテゴリを削除するのはより困難です。これが私のチャートの合理化されたバージョンです。

    var genderChart = c3.generate({
    bindto: '#chart-gender',
    data: {
        json: [
          {
            Disease:"Mumps",
            "Female":231,
            "Male":198
          },
            Disease:"Tuberculosis",
            "Female":18,
            "Male":197
          }
        ],

        type: 'bar',
        keys: {
            x: "Disease",
            value: ["Female","Male"]
        },
        selection: {
            enabled: true,
            grouped: true
        },
    },

    axis: {
        x: {
            type: 'category',
        }        
    },
});

病気を動的に表示および非表示 (ロードおよびアンロード) したいと考えています。たとえば、結核のオンとオフを切り替えられるようにしたいと考えています。私の実際のチャートには、他にも多くの病気があります。病気がバーで、性別が x 軸になるようにデータを構成すれば、これは簡単です。しかし、それは私がこのチャートで示したい比較ではありません。これはc3で可能ですか？特定の x 値 (病気) を持つすべての値を選択し、それらのデータ ポイントをアンロードするにはどうすればよいですか? 洞察に感謝します。

4

1 に答える 1

0

json データ オブジェクトを作成してから、チャートを再レンダリングします。

次に例を示します。

var data = [{
    Disease: "Mumps",
    Female: 231,
    Male: 198
}, {
    Disease: "Tuberculosis",
    Female: 18,
    Male: 197
}];

$("button").click(function () {
    Render();
});

Render()

function Render() {

    var selectedData = [];
    if ($("#mumps").prop("checked")) selectedData.push(data[0]);
    if ($("#tb").prop("checked")) selectedData.push(data[1]);

    var genderChart = c3.generate({
        data: {
            json: selectedData,

            type: 'bar',
            keys: {
                x: "Disease",
                value: ["Female", "Male"]
            },
            selection: {
                enabled: true,
                grouped: true
            },
        },

        axis: {
            x: {
                type: 'category',
            }
        },
    });
}

フィドルのコードは次のとおりです。 http://jsfiddle.net/ot19Lyt8/14/

于 2015-04-22T19:17:09.680 に答える