im体育
  • 即時預覽
  • |
加入購物車

圖表

im體育提供可自訂的響應式圖表，涵蓋賽事熱度趨勢、球隊表現對比與賽果分佈，讓數據一目瞭然。

IM體育元件
數據介面詳解

im體育為核心功能增加資料屬性層，可直接在 HTML 文件中存取，主要提供 3 個屬性：

data-line-chart | data-bar-chart | data-pie-chart 以 JSON 格式傳入資料，分別顯示於趨勢圖、對比圖或餅圖中。
data-options以 JSON 格式傳入附加選項。
data-series-color為每個資料集指定獨立顏色，資料以 JSON 格式傳入。

請參考下方程式碼範例。

更多功能，請前往官方外掛網站：
http://gionkunz.github.io/chartist-js/index.html

折線圖

公司1
公司2
公司3 
<!-- Line chart: Multiple lines of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-ms">
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #4e54c8;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #fea569;"></div>
    <span class="d-inline-block align-middle">Company 2</span>
  </div>
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f34770;"></div>
    <span class="d-inline-block align-middle">Company 3</span>
  </div>
</div>

<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-line-chart='{"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"], "series": [[12, 9, 7, 8, 6, 4, 3, 2, 0], [2, 1, 3, 7, 9, 8, 7.7, 4, 7], [1, 3, 4, 5, 6, 8, 9, 10, 11]]}' data-options='{"axisY": {"onlyInteger": true}}' data-series-color='{"colors": ["#4e54c8", "#fea569", "#f34770"]}'></div>
// Line chart: Multiple lines of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-ms
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #4e54c8;")
    span.d-inline-block.align-middle Company 1
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #fea569;")
    span.d-inline-block.align-middle Company 2
  .border.rounded.py-1.px-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f34770;")
    span.d-inline-block.align-middle Company 3

// Chart
.ct-chart.ct-perfect-fourth(data-line-chart='{"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"], "series": [[12, 9, 7, 8, 6, 4, 3, 2, 0], [2, 1, 3, 7, 9, 8, 7.7, 4, 7], [1, 3, 4, 5, 6, 8, 9, 10, 11]]}', data-options='{"axisY": {"onlyInteger": true}}', data-series-color='{"colors": ["#4e54c8", "#fea569", "#f34770"]}')

長條圖

公司1
公司2 
<!-- Bar chart: Multiple bars of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-ms">
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f34770;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #fea569;"></div>
    <span class="d-inline-block align-middle">Company 2</span>
  </div>
</div>

<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-bar-chart='{"labels": ["2016", "2017", "2018", "2019", "2020", "2021"], "series": [[12000, 9000, 7000, 8000, 11000, 6000], [3500, 5000, 8750, 1300, 3000, 8750]]}', data-series-color='{"colors": ["#f34770", "#fea569"]}'></div>
// Bar chart: Multiple bars of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-ms
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f34770;")
    span.d-inline-block.align-middle Company 1
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #fea569;")
    span.d-inline-block.align-middle Company 2

// Chart
.ct-chart.ct-perfect-fourth(data-bar-chart='{"labels": ["2016", "2017", "2018", "2019", "2020", "2021"], "series": [[12000, 9000, 7000, 8000, 11000, 6000], [3500, 5000, 8750, 1300, 3000, 8750]]}', data-series-color='{"colors": ["#f34770", "#fea569"]}')

圓餅圖

公司1
公司2
公司3 
<!-- Pie chart: Multiple slices of different color + Legend -->

<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-ms">
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #69b3fe;"></div>
    <span class="d-inline-block align-middle">Company 1</span>
  </div>
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #42d697;"></div>
    <span class="d-inline-block align-middle">Company 2</span>
  </div>
  <div class="border rounded py-1 px-2 me-2 mb-2">
    <div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f34770;"></div>
    <span class="d-inline-block align-middle">Company 3</span>
  </div>
</div>

<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#69b3fe", "#42d697", "#f34770"]}'></div>
// Pie chart: Multiple slices of different color + Legend

// Legend
.d-flex.flex-wrap.justify-content-center.fs-ms
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #69b3fe;")
    span.d-inline-block.align-middle Company 1
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #42d697;")
    span.d-inline-block.align-middle Company 2
  .border.rounded.py-1.px-2.me-2.mb-2
    .d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f34770;")
    span.d-inline-block.align-middle Company 3

// Chart
.ct-chart.ct-perfect-fourth(data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#69b3fe", "#42d697", "#f34770"]}')
頂端
微信：im_957