vue chart 我想要讓圓形圖內部可以顯示百分比

vue chart

yonghaow88 2024-05-07 11:08:25 ‧ 656 瀏覽

分享至

      <Pie id="my-chart-id" :options="chartOptions" :data="chartData" />
    </div>

    <div class="east">
      <a href="redg.vue">訪客預約類別</a>
    </div>
  </div>

  <div class="right-section">
    <h3>楊梅物流中心</h3>
    <h4>車輛進出紀錄</h4>
    <img src="../assets/Group2.png" width="50" height="50" />
    <div class="adef">
      <h5>駕駛公司:A物流公司</h5>
      <h5>駕駛人:王先生</h5>
      <h5>車牌號碼:Ac-2345</h5>
      <h5>車種:貨車</h5>
      <h5>進場時間:2023/06/23 12:00</h5>
    </div>
    <div class="adef">
      <img src="../assets/Group2.png" width="50" height="50" />
      <h5>駕駛公司:A物流公司</h5>
      <h5>駕駛人:王先生</h5>
      <h5>車牌號碼:Ac-2345</h5>
      <h5>車種:貨車</h5>
      <h5>進場時間:2023/06/23 12:00</h5>
    </div>
  </div>
</div>

<div>
  <router-link to="/"></router-link>
  <router-link to="/Page2"></router-link>
  <router-view></router-view>
</div>

SunM0on iT邦新手 4 級 ‧ 2024-05-07 17:25:25 檢舉

看你經常問一些沒有概念的問題，哥們你這樣工作真不痛苦嗎，有沒有可能你真正要學的東西叫做調試，F12打開來會看Request包、會打斷點那種，最少要學斷點怎麼打，否則你同事可能會瘋掉，然後你也會

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

w315899212

iT邦新手 5 級 ‧ 2024-05-07 12:37:29

最佳解答

应该是要在chartOptions里面配置的

回應 7
分享
檢舉

看更多先前的回應...收起先前的回應...

yonghaow88 iT邦新手 4 級 ‧ 2024-05-07 12:58:27 檢舉

配置了，可是就還是不會顯示

a05151988 iT邦新手 3 級 ‧ 2024-05-07 15:00:06 檢舉

重點就在chart，但你的options內容完全看不到，你可能要把你的options跟假data丟出來給大家看，不然只能通靈了。

yonghaow88 iT邦新手 4 級 ‧ 2024-05-07 15:54:33 檢舉

https://codepen.io/yyuotoiz-the-vuer/pen/qBGWdvw

yonghaow88 iT邦新手 4 級 ‧ 2024-05-07 15:59:31 檢舉

我完整的程式碼

w315899212 iT邦新手 5 級 ‧ 2024-05-07 16:54:11 檢舉

看了下doc，这个组件库单独无法实现，需要其他的plugin：

$> npm install chartjs-plugin-datalabels

// 引入
import DataLabel from 'chartjs-plugin-datalabels';

// 注册
ChartJS.register(DataLabel);

// 在option中配置
export const options = {
  plugins: {
    datalabels: {
      formatter: (value, categories) => {
        let sum = 0;
        let dataArr = categories.chart.data.datasets[0].data;
        dataArr.map((data) => {
          sum += data;
        });
        let percentage = ((value * 100) / sum).toFixed(2) + '%';
        return percentage;
      },
      color: '#fff',
    },
  },
};