chart.js增加了点击价值

时间:2014-09-25 01:57:44

标签: javascript onclick chart.js

我用图表js创建了雷达图表。我可以添加标签,但现在我想知道如何输入一个值而不是输入一个值,我可以将它们全部设置为0,并在点击标签时增加/更新+1

http://jsfiddle.net/pevy7vsz/15/

var ctx = $("#myChart").get(0).getContext("2d");

var myNewChart = new Chart(ctx);

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [ {
                  label: "My First dataset",
                  fillColor: "rgba(220,220,220,0.2)",
                  strokeColor: "rgba(220,220,220,1)",
                  pointColor: "rgba(220,220,220,1)",
                  pointStrokeColor: "#fff",
                  pointHighlightFill: "#fff",
                  pointHighlightStroke: "rgba(220,220,220,1)",
                  data: [65, 59, 80, 81, 56, 55, 40]
              } ] 
};

var myRadarChart = new Chart(ctx).Radar(data);
$("#add").on( "click", function() {

    var month = $("#month").val();
    var value = $("#value").val();
    var values = new Array();

    values.push(value);

    console.log("adding data...");
    console.log("month:" + month);
    console.log("value:" + value);

    myRadarChart.addData(values, month);

    console.log("data added...");  
});

1 个答案:

答案 0 :(得分:2)

您可以使用函数“getPointsAtEvent”,它返回ChartElement:

ChartElement {value: 4, label: "January", datasetLabel: "My First dataset", x: 197.1083317156525, y: 125.62930048634354…}

使用此功能:

var canvas = document.getElementById("myChart") canvas.onclick = function(evt){
var activePoints = myRadarChart.getPointsAtEvent(evt);
activePoints[0].value++;
myRadarChart.update();
console.log(activePoints[0]); };

参见完整示例:http://jsfiddle.net/pevy7vsz/29/