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 - 一次显示一组数据

回答

相关问题