ChartJS - 一次显示一组数据

时间:2017-03-07 17:43:52

标签: javascript charts chart.js

我正在尝试使用ChartJS做一些事情,但我无法在文档中找到我需要的信息,他们似乎没有论坛或任何有用的问题。

我想要完成的主要事情是一次只显示一组数据。我能够在加载时隐藏一组,但是当你点击它时,我无法弄清楚如何隐藏第一组。最终我可能有3套,需要确保隐藏其他两套。我已经阅读了如何获取点击事件,但我不确定要返回什么。

我也希望能够自定义标题&标签文本/布局,但我不确定这是否可行。

以下是我目前为代码所做的事情:

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

1 个答案:

答案 0 :(得分:0)

这是我解决方案的一支笔: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>