CanvasJS,设置用户输入的问题标题为图表

时间:2017-04-26 21:03:29

标签: javascript canvasjs

我目前面临为canvasJS图表创建用户输入标题的问题。我目前正在canvasJS上完成教程,我认为它会创建一个简洁的小项目来创建面向用户输入的饼图。

我面临的当前问题是尝试从HTML输入的文本正确显示。

[的jsfiddle] https://jsfiddle.net/n3n0pssc/

var chart = new CanvasJS.Chart("chartContainer",{
               title:{
document.getElementById("chartTitle").setAttribute("text")
}`

我理解标题必须通过将它与addDataPointsAndRender函数绑在一起来设置,但我很困惑,因为canvasJS只按标题显示设置文本:{text:“title”}我试图找出它将如何通过获取输入文本一起去。

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

您可以使用图表选项或使用CanvasJS API的set()方法设置图表的用户输入。

我修改了您的jsfiddle,现在正在使用它。

function addDataPointsAndRender(){
    chart.options.title.text =document.getElementById("chartTitle").value;
    chart.options.data[0].dataPoints.push({ 
        y: parseFloat(document.getElementById("yValue1").value),
        indexLabel: document.getElementById("indexLabel1").value
    });
    chart.render();
}

另请看:

  1. Tutorial on Rendering chart from user Input
  2. Updating Chart Options
  3. CanvasJS Methods & Properties Documentation