ChartJS - 一次顯示一組數據

我正在嘗試使用ChartJS做幾件事情，但我無法在文檔中找到所需的信息，而且它們似乎沒有論壇或隨時隨地提問。ChartJS - 一次顯示一組數據

我試圖完成的主要事情是一次只顯示一組數據。我能夠隱藏載入的一個集合，但是當你點擊它時，我無法弄清楚如何隱藏第一個。最終我可能會有3套，並且需要確定其他兩個是隱藏的。我已閱讀如何獲取點擊事件，但我不確定要返回的內容。

我也想定製標題& label text/layout，但我不確定這是否可行。

這裏是我到目前爲止的代碼：

var ctx = $("#myChart"); 
var data = { 
    labels: ["LABEL1", "LABEL2", "LABEL3", "LABEL4", "LABEL5"], 
    datasets: [ 
    { 
     label: "DATA1", 
     backgroundColor: "rgba(62,135,74,.5)", 
     pointBackgroundColor: "#34b44a", 
     data: [3, 3, 4, 2, 3] 
    }, 
    { 
     label: "DATA2", 
     backgroundColor: "rgba(255,99,132,0.2)", 
     pointBackgroundColor: "rgba(255,99,132,1)", 
     data: [2, 2, 4, 4, 3], 
     hidden: true 
    } 
    ] 
}; 

var options = { 
    title: { 
    display: true, 
    fontColor: '#999', 
    fontStyle: 'regular', 
    fullWidth: false, 
    text: 'CHART TITLE' 
    }, 
    legend: { 
    fullWidth: false, 
    labels: { 
     fontColor: '#fff', 
     boxWidth: 0 
    } 
    }, 
    elements: { 
    line: { 
    } 
    }, 
    scale: { 
    angleLines: { 
     color: '#666' 
    }, 
    gridLines: { 
     color: '#666' 
    }, 
    pointLabels: { 
     fontColor: '#fff' 
    }, 
    ticks: { 
     min: 0, 
     max: 5, 
     stepSize: 1, 
     display: false 
    } 
    }, 
    tooltips: { 
    enabled: false 
    } 
}; 

var myRadarChart = new Chart(ctx, { 
    type: 'radar', 
    data: data, 
    options: options 
});

您可以在右側的設計在這裏看到：http://codepen.io/haxen2000/pen/jBVMqK

來源

2017-03-07 Stephen Synowsky

您是否已經找到解決方案？我正在檢查你的代碼，看起來你已經實現了按鈕來顯示不同的數據集。 – jordanwillis

是的，道歉。我的意思是做一個單獨的筆。現在就這樣做。 –

這裏有一個筆我的解決方案：http://codepen.io/haxen2000/pen/evgwmB

我只是拿出我需要的東西，並將它們製作成HTML元素，這樣我就可以根據需要設計風格很高興看到ChartJS代碼中的解決方案，但這會起作用。

<div class='header'> 
    <span class='title'>CHART TITLE</span> 
    <button id='data1'>DATA1</button> 
    <button id='data2'>DATA2</button> 
</div>

來源

2017-03-09 16:15:22

ChartJS - 一次顯示一組數據

回答

相關問題