Есть блок, в нем используется highchart
, но строчки слишком высокие, как сделать их меньше?
<div class="tcgraf" data-1="[70,80,69,33,4,2]" data-2="[90,77,65,21,2,3]" id="teams_compare" data-highcharts-chart="5">
<div id="highcharts-10" class="highcharts-container " style="position: relative; overflow: hidden; width: 568px; height: 363px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Roboto, sans-serif;">
<svg version="1.1" class="highcharts-root" style="font-family:'Roboto', sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="568" viewBox="0 0 568 363" height="363">
<desc>Created with Highcharts 5.0.2</desc>
<defs>
<clipPath id="highcharts-11">
<rect x="0" y="0" width="353" height="568" fill="none"></rect>
</clipPath>
</defs>
<rect fill="none" class="highcharts-background" x="0" y="0" width="568" height="363" rx="0" ry="0"></rect>
<rect fill="none" class="highcharts-plot-background" x="0" y="5" width="568" height="353"></rect>
<g class="highcharts-grid highcharts-xaxis-grid ">
<path fill="none" class="highcharts-grid-line" d="M 0 37.5 L 568 37.5" opacity="1"></path>
<path fill="none" class="highcharts-grid-line" d="M 0 153.5 L 568 153.5" opacity="1"></path>
<path fill="none" class="highcharts-grid-line" d="M 0 268.5 L 568 268.5" opacity="1"></path>
</g>
<g class="highcharts-grid highcharts-yaxis-grid ">
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M -0.5 5 L -0.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 56.5 5 L 56.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 113.5 5 L 113.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 169.5 5 L 169.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 226.5 5 L 226.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 283.5 5 L 283.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 340.5 5 L 340.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 397.5 5 L 397.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 453.5 5 L 453.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 510.5 5 L 510.5 358" opacity="1"></path>
<path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 568.5 5 L 568.5 358" opacity="1"></path>
</g>
<rect fill="none" class="highcharts-plot-border" x="0" y="5" width="568" height="353"></rect>
<g class="highcharts-axis highcharts-xaxis ">
<path fill="none" class="highcharts-axis-line" d="M 0 5 L 0 358"></path>
</g>
<g class="highcharts-axis highcharts-yaxis ">
<path fill="none" class="highcharts-axis-line" d="M 0 358 L 568 358"></path>
</g>
<g class="highcharts-series-group">
<g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-1 highcharts-tracker" transform="translate(568,358) rotate(90) scale(-1,1) scale(1 1)" width="568" height="353" clip-path="url(#highcharts-11)">
<rect x="298" y="0" width="46" height="321" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect>
<rect x="241" y="0" width="46" height="280" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect>
<rect x="183" y="0" width="46" height="277" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect>
<rect x="125" y="0" width="46" height="222" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect>
<rect x="67" y="0" width="46" height="190" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect>
<rect x="9" y="0" width="46" height="342" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect>
</g>
<g class="highcharts-markers highcharts-series-0 highcharts-bar-series highcharts-color-1 " transform="translate(568,358) rotate(90) scale(-1,1) scale(1 1)" width="568" height="353" clip-path="none"></g>
<g class="highcharts-series highcharts-series-1 highcharts-bar-series highcharts-color-0 highcharts-tracker" transform="translate(568,358) rotate(90) scale(-1,1) scale(1 1)" width="568" height="353" clip-path="url(#highcharts-11)">
<rect x="298" y="321" width="46" height="248" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect>
<rect x="241" y="280" width="46" height="289" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect>
<rect x="183" y="277" width="46" height="292" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect>
<rect x="125" y="222" width="46" height="347" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect>
<rect x="67" y="190" width="46" height="379" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect>
<rect x="9" y="342" width="46" height="227" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect>
</g>
<g class="highcharts-markers highcharts-series-1 highcharts-bar-series highcharts-color-0 " transform="translate(568,358) rotate(90) scale(-1,1) scale(1 1)" width="568" height="353" clip-path="none"></g>
</g>
<g class="highcharts-axis-labels highcharts-xaxis-labels "></g>
<g class="highcharts-axis-labels highcharts-yaxis-labels "></g>
</svg>
</div>
</div>
Там где у вас элементы rect измените значение width="46" на нужное вам.
Если у вас объект генерируется скриптом. Задать ширину бара можно в опциях highchart:
plotOptions: {
bar: {
pointWidth: 10
}
}
Посмотрите этот пример: http://jsfiddle.net/monobit/95w7cvL4/
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Не могу понять как правильно реализоватьДопустим у меня есть масив data, который включает в себя список определенных id div'ов на странице и он передается...
Я учусь делать сайтыЕсть вопрос - как сделать, чтобы можно было в админ-панели редактировать строки из config
Подскажите, как возвратить список удалённых файлов в виде массива без использования глобальной переменной?