第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

Chart.js 上不同顯示的顏色

Chart.js 上不同顯示的顏色

紅顏莎娜 2023-07-29 15:24:36
我通過 Chartkick-vue 將相同的顏色傳遞給 Chart.js，但它們的顯示方式不同。為什么？<column-chart  :data="votesData"  height="200px"  :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"></column-chart><bar-chart  :data="chartData"  suffix="%"  height="100px"  :colors="['#28a745', '#007bff', '#ffc107', '#dc3545']"  :stacked="true"  :library="{ options: { tooltips: false } }">更新：顏色傳遞方式存在差異。第一個(gè)示例是顏色數(shù)組，第二個(gè)示例是顏色數(shù)組的數(shù)組。第二個(gè)很奇怪，但它來自這個(gè)答案https://stackoverflow.com/a/61139231/1639556。我有另一張具有相同癥狀的圖表：<column-chart :data="chartData" :colors="['#007bff', '#28a745']" height="200px">
查看完整描述

3 回答

?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

解決方案是將 RGBA 十六進(jìn)制值傳遞到 color 屬性中，而不是給出 RGB 十六進(jìn)制值。如果執(zhí)行此操作，您會發(fā)現(xiàn)無論選擇哪種漸變，兩個(gè)圖表都顯示相同的顏色和漸變，因此顏色將相同。

為了便于使用，我在此示例中將顏色放入單獨(dú)的變量中：https://codesandbox.io/s/immutable-worker-3qxgj

<template>

  <div class="hello">

    <column-chart :data="votesData" height="200px" :colors="[colors]">

    </column-chart>

    <bar-chart

      :data="chartData"

      suffix="%"

      height="100px"

      :colors="colors"

      :stacked="true"

      :library="{ options: { tooltips: false } }"

    >

    </bar-chart>

    <line-chart :data="data" :colors="colors" />

    <bar-chart

      :colors="colors"

      :data="booksData"

      suffix="%"

      height="200px"

      :stacked="true"

    ></bar-chart>

  </div>

</template>


<script>

export default {

  name: "HelloWorld",

  props: {

    msg: String,

  },

  data() {

    return {

      colors: ["#28a745ff", "#007bffff", "#ffc107ff", "#dc3545ff"],

    };

  },

};

</script>


查看完整回答
反對 回復(fù) 2023-07-29
?
呼如林

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊

由于charts.js中的條形圖具有borderColor和backgroundColor，您可以在數(shù)據(jù)集屬性中自定義它們以獲得與柱形圖相同的結(jié)果，我正在談?wù)撨@樣的編寫：


    let chartData = {labels: ['Neni problem','Branalita', 'Vadi me to', 'Vas...'], datasets: [

        {

          backgroundColor: 'rgba(40, 167, 69, 1)',

          borderWidth: 0,

          data: 40

        }

         ,

         ...

        }];


<bar-chart

  :data="chartData"

  suffix="%"

  height="100px"

  :stacked="true"

  :library="{ options: { tooltips: false } }"

>

并且因?yàn)槟幌Ｍ哂羞吙蝾伾⑶蚁Ｍ鼉H具有純色背景顏色，所以在數(shù)據(jù)集選項(xiàng)中，我建議您將每個(gè)條形的 borderWidth 設(shè)置為 0 并使用與 alpha 1 相同的十六進(jìn)制顏色的 RGBA


查看完整回答
反對 回復(fù) 2023-07-29
?
森林海

TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊

文檔顯示，需要設(shè)置背景顏色和輪廓顏色，您只給出一種顏色，因此假設(shè)您指的是條形的輪廓。它將使用該顏色作為輪廓，然后使用與條形背景顏色相同顏色的淡出版本（較淺）。

嘗試同時(shí)使用背景和輪廓顏色，或者簡單地刪除輪廓并隨后為每個(gè)條解析一種顏色。


查看完整回答
反對 回復(fù) 2023-07-29
  • 3 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號