ChartJS條形圖與每個條對應的圖例

我想了解他們的條形圖上的ChartJS文檔。它對我來說沒有任何意義，因爲一次意義上的頂部標籤看起來好像只適用於第一個小節（基於顏色），在另一個意義上說，整個圖表（它是唯一的標籤不是一個提示，這是前面和中心）ChartJS條形圖與每個條對應的圖例

我一直在努力使它更像他們的折線圖，其中顯示了一個標籤和相關的每行一個彩色方塊傳奇圖表。（他們沒有一個多行圖表的例子，但它確實是這樣工作的）。

數據對象內的標籤屬性被轉換到旁邊的欄中的值，例如labels: ['36%', '10%', '18%', '34%', '0%', '2%']

我想在頂部的圖例指示AQUA顏色是蘋果，灰色是橘子，所述綠色是梨等，但最接近的我提供data.datasets對象數組和製作標籤和數組，這隻會導致一組條形，如示例here。

來源

2017-06-01 1252748

只需創建一個數據集爲每種類型的，他們沒有有不止一個吧。 – Blindman67

@ Blindman67你能告訴我你的意思嗎？這聽起來與我在將數組標籤和數據集組合在一起時所嘗試的非常相似，但是我對此很感興趣，所以也許我沒有把它弄清楚。 – 1252748

也許你是在這樣的事情之後。一個類別稱爲股票，然後是每種類型的數據集。

// create a chart. 
 
const ctx = canvas.getContext("2d"); 
 
const chart = new Chart(ctx, { 
 
    type: "horizontalBar", 
 
    data: { 
 
     labels: ["Stock"], 
 
     datasets: [{ 
 
     label: "Apples", 
 
     backgroundColor: "#AF7", 
 
     data: [Math.random() * 100], 
 
     },{ 
 
     label: "Oranges", 
 
     backgroundColor: "#FA4", 
 
     data: [Math.random() * 100], 
 
     },{ 
 
     label: "Mangos", 
 
     backgroundColor: "#FF7", 
 
     data: [Math.random() * 100], 
 
     },{ 
 
     label: "Avocados", 
 
     backgroundColor: "#2A7", 
 
     data: [Math.random() * 100], 
 
     }] 
 
    }, 
 
    options: { 
 
      responsive: false, 
 
      legend: { position: 'top'}, 
 
      title: { display: true, text: 'Fruit in stock'} 
 
     } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id=canvas height=200 width=500></canvas>

來源

2017-06-01 03:59:54 Blindman67

非常好，謝謝。而不是僅僅在左邊的「股票」，是否有無論如何爲每個欄放置單獨的標籤，例如'18,82,22,80'沿着y軸？ – 1252748

我確實看過，但找不到這樣做的方法，但這並不意味着它不可能 – Blindman67

明白了。感謝您的幫助！也很好地將您的水果名稱與您的顏色對齊。除了我的主要問題之外，我的例子在這方面相當糟糕;） – 1252748

ChartJS條形圖與每個條對應的圖例

回答

相關問題