Как я могу создать эту линейную гистограмму, как линии искры Excel в Javascript? - PullRequest
Новая
       37

Как я могу создать эту линейную гистограмму, как линии искры Excel в Javascript?

1 голос
/ 30 января 2011

У меня есть пример изображения этой функции, которая теперь доступна в искровых линиях Excel 2010:

enter image description here

В идеале я хотел бы также иметь вертикальную линию, указывающую макс / мин для каждой строки.

Любые ресурсы на этот счет (я здесь, чтобы узнать) было бы здорово.

Ответы [ 2 ]

2 голосов
/ 31 января 2011

(Если вы просто хотите сделать это, диаграммы Google будут намного быстрее и проще - но если вы хотите учиться, это звучит как довольно крутой маленький проект.)

Похоже, у вас в основном проблемы с HTML / CSS.

Я бы выбрал <div> для этого, так как <table> имеет больше багажа с браузерами для настройки ширины, границ и т. Д. <div> в значительной степени чистый лист. Я бы проигнорировал все лишние строки в вашем примере изображения (сначала, во всяком случае) и сосредоточился бы на создании столбцов разной ширины с линиями для макс и мин.

HTML: 

<div class="row">
  <div class="value">5873</div>
  <div class="min">3049</div>
  <div class="max">6039</div>
</div>

CSS: 

div {
    height: 20px;  /* You'll want all of the heights to match */
}  

div.value {
     position: absolute;  /* All of the inner divs are positioned absolute so they overlap eachother */
     -moz-box-shadow: inset 0 0 10px #aaa;      /* basic inset shadow for some dimension - you could make it look however u like with some work */
     -webkit-box-shadow: inset 0 0 10px #aaa;
     box-shadow: inset 0 0 10px #aaa;
}
div.min,
div.max {
    position: absolute;
    text-indent: -999em;
    border-right: 2px solid #000;    /* This becomes the indicator for the min/max */
}

В javascript вы захотите установить ширину всех div.value, div.max и div.min в зависимости от их текстовых значений, например: 

$('div.value, div.min, div.max').each(function(){
    $(this).width($(this).text() / 100);
});

Я пропускаю много деталей здесь, но, надеюсь, это поможет. Удачи!

1 голос
/ 30 января 2011

Как насчет Google Chart Tools ? Похоже, у них есть множество вариантов - мы успешно использовали это в наших проектах (хотя я лично никогда не использовал это).

Вот краткий пример (ярлыки не совсем то, что вы ищете, но некоторые примеры имеют встроенные ярлыки):

...