修改圖表JS

Question

我用圖表JS

var chartGood = "rgba(50,182,93,0.5)"; 
var lineChartData = { 
    labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"], 
    datasets : [ 
     { 
      fillColor : chartGood, 
      strokeColor : "rgba(255,255,255,1)", 
      pointColor : "rgba(50,182,93,1)", 
      pointStrokeColor : "#fff", 
      data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59] 
     } 
    ] 
} 

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData); 

我有2個問題

1. 如何讓最後一棒的另一種顏色
2. 如何讓最後一個標籤作爲圖像

Answer 1

對於第1點：

要繪製不同顏色的最後一個條，可以將數據集劃分爲不同的數據數組，如下所示：第一個數據數組：將第一個數值替換爲null ...，對於第二個數據數組，除第最後一個 ！！

"datasets": [{ 
      fillColor : chartGood, 
      strokeColor : "rgba(255,255,255,1)", 
      pointColor : "rgba(50,182,93,1)", 
      pointStrokeColor : "#fff", 
      data : [12, 21, 28, 29, 31, 55, 52, 50, 49, null] 
     }, 
     { 
      fillColor : chartGood, 
      strokeColor : "rgba(255,0,0,1)", 
      pointColor : "rgba(50,182,93,1)", 
      pointStrokeColor : "#fff", 
      data : [null, null, null, null, null, null, null, null, null, 59] 
     }], 

對於第二點：

如果你想的最後一個標籤將是一個形象：這是不可能的chart.js之....但是你可以使用一些（HTML，CSS）技巧把你的形象在過去的標籤......

• 作爲例子，你可以繪製一個表格中的標籤下方，列數=設置標籤的長度（在你的案件= 10）
• 你設置爲style = visibility：隱藏每列。只有最後一個E（可視）
• 你把負邊距值（放置在標籤圖像）

希望這有助於

Answer 2

可以使用ChartNew.Js在https://github.com/FVANCOP/ChartNew.js/ libary可用。該庫添加了爲顏色選項添加對象數組的功能。它確實增加了一些用於更改標籤的選項，但我不認爲可以將圖像用於實際圖表的標籤。您可以修改彈出的標籤，如：How to add image to chart.js tooltip?，但我無法確定。下面是一些代碼，我在最近的應用程序使用顏色代碼每個欄基於數據的百分比值：有點象是被提到

//Set all canvas options and fill with data 
self.chartJs = function() { 
    //create an array for each column to be set into the chart properties -- also create arrays for the colors of the columns 
    var arrayOfJobData = self.chartData(); 
    var descArray = []; 
    var effArray = []; 
    var colorArray = []; 

    for (i = 0; i < arrayOfJobData.length; i++) { 
     //console.log(arrayOfJobData[i].Cost_Code_Description); 
     descArray.push(arrayOfJobData[i].Cost_Code_Description); 
     //console.log(arrayOfJobData[i].Efficency); 
     effArray.push(arrayOfJobData[i].Efficency); 

     //Create an array of colors to match with the corresponding efficency % to show a + - relationship in the color scheme 
     if (arrayOfJobData[i].Efficency < 100) { 
      colorArray.push("red"); 
     } 
     else if (arrayOfJobData[i].Efficency >= 100) { 
      colorArray.push("green"); 
     } 
    } 

    //chart data is set and colors selected 
    var barChartData = { 
     labels: descArray, //array labels holding the desc for each cost code 
     datasets: [ 
      { 
       type: "Bar", 
       //label: "Efficency %", 
       fillColor: colorArray, 
       strokeColor: "black", 
       pointColor: "rgba(220,220,220,1)", 
       pointstrokeColor: "white", 
       drawMathLine: "mean", //using the math functions add-in draw a line with the average % 
       mathLineStrokeColor: "orange", 
       data: effArray //array of efficency percent values 
      }] 
    } 

基本上你可以建立自己的使用方法顏色陣列如果你也想要其他人只設置最後一種顏色。重要的是您應該使用ChartNew.js輕鬆地完成您想要的任務。

var chartGood = "rgba(50,182,93,0.5)"; 
var lineChartData = { 
    labels : ["3/20","3/21","3/22","3/23"], 
    datasets : [ 
     { 
      fillColor: ["chartGood ","chartGood ","chartGood ","red"], 
      strokeColor : "rgba(255,255,255,1)", 
      pointColor : "rgba(50,182,93,1)", 
      pointStrokeColor : "#fff", 
      data : [ 52, 50, 49, 59] 
     } 
    ] 
} 

還有一個在相當不錯的文檔ChartNew.js：https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options