2015-04-21 3 views
0

Я провел много времени с документацией и примерами c3, но не смог найти способ выгрузить или скрыть категорию из диаграммы с использованием функций API. Удаление линий или полос легко, но удаление категорий оси x оказывается более сложным. Вот упрощенная версия моей диаграммы.c3.js: Удалить категории из оси 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', 
     }   
    }, 
}); 

Я хотел бы динамически показывать и скрывать (загружать и выгружать) болезни. Например, я хотел бы включить и выключить Туберкулез. У моей фактической карты есть ряд других заболеваний. Если бы я структурировал данные таким образом, чтобы заболевания были барами, а пол был на оси х, это было бы легко. Однако это не сравнение, которое я хочу показать с этой диаграммой. Возможно ли это с помощью c3? Как выбрать все значения с заданным значением x (болезнь), а затем выгрузить эти точки данных? Я ценю любое понимание.

ответ

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/

+0

Спасибо за ответ. Метод определенно работает. Однако мне нужно быть осторожным с размером функции. Он может быть довольно тяжелым в зависимости от графика, который получает повторно отображаемый. – Zach

Смежные вопросы