Переименование круговой диаграммы флота ID

Я пытаюсь создать круговую диаграмму с использованием карт флота. Я успешно удалось создать с помощью следующего кода:Переименование круговой диаграммы флота ID

HTML:

<div class="row"> 
    <div class="col-md-6"> 
     <div id="pie-chart"></div> 
    </div> 
</div>

Javascript:

var data = []; 

    data[0] = { label: "Vertification successful", data: 9 }; 
    data[1] = { label: "Vertification failed", data: 2 }; 
    var series = Math.floor(Math.random() * 10) + 1; 
    $.plot($("#pie-chart"), data, 
    { 
     series: { 
      pie: { 
       show: true, 
      } 
     }, 
     grid: { hoverable: true }, 
    });

И он показывает просто отлично. Дело в том, если я изменить идентификатор элемента сНа к «пироге Chart1» (а не «круговой диаграммы») и обновить JavaScript соответственно:

$.plot($("#pie-chart1"), data,

Я получаю следующее сообщение об ошибке:

Uncaught Invalid dimensions for plot, width = 501, height = 0

Что может быть причиной этого? Я просто хочу переименовать идентификатор, который по какой-то причине невозможен.

источник

2014-02-27 Jamie Romeo

Я использовал флот в прошлом, и могу сказать вам, что элемент, используемый для флота-графика (ваш div-диаграмма), не может иметь высоту или ширину, равную 0 (в противном случае вы получите ошибку, например тот, который вы описали). Поэтому мне кажется странным, что он работает в первом случае. Вы уверены, что, возможно, вы не задаете ширину и высоту в css? – user3334690

https://github.com/flot/flot/blob/master/README.md читайте в разделе «Основное использование». Его надлежащая разметка – rockStar

@ user3334690 Он отлично работает в первом случае. Только когда я меняю идентификатор, который он терпит неудачу. –

Очень вероятно, что на вашем сайте есть CSS или, возможно, JS, который ожидает, что div будет называться круговой диаграммой. Вы должны убедиться, что он по-прежнему применяется к новому div. Например, если у вас:

#pie-chart { 
    width: 400px; 
    height: 300px; 
}

При изменении идентификатора DIV, необходимо обновить эту ссылку тоже, или же высоту Заполнителя и ширина становится неопределенным, что Flot не может справиться.

Если ваша цель в добавлении этого числа состоит в создании нескольких диаграмм, вы должны использовать класс для применения стилей, а не для идентификатора.

источник

2014-02-28 04:18:00 DNS

Переименование круговой диаграммы флота ID

ответ

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