Question

我是canvas.js的新手，并且我试图动态绘制图形，但是它无法正常工作，并且给我error，chart.render（）不是控制台窗口中的函数。有人能告诉我我的错误吗？预先感谢。

已经尝试过此解决方案，但我听不懂。都不能解决我的错误。 canvasjs render is not a function

<!DOCTYPE html>
<html>
<head>
    <title>hello love</title>

</head>
<body><br />

    <script>

        function showchart() {
            var dataPoints = [];
            var dataPointsExpense = [];
            //calling function for y2 axis
            function addDataExpense(result) {

                for (var i = 0; i < result.length; i++) {
                    dataPointsExpense.push({
                        x: new Date(result[i].day + result[i].month + result[i].year),
                        y: result[i].ExpenseofMonth


                    });
                }

                 chart.render();

            }
            //calling finctions for income
            function addData(result) {
                console.log(result);
                for (var i = 0; i < result.length; i++) {
                    dataPoints.push({
                        x: new Date(result[i].day + result[i].month + result[i].year),
                        y: result[i].IncomeofMonth
                    }

                    );
                }
                 chart.render();

                addDataExpense(result)
            }


                    //canvas coding
                    var chart =  {

                        exportEnabled: true,
                        animationEnabled: true,
                        title: {
                            text: "Income Vs Expense of the Month"
                        },
                        subtitles: [{
                            text: "This will Show You Expense plus Income of the Month"
                        }],
                        axisX: {
                            title: "States"
                        },
                        axisY: {
                            title: "Income of the Month",
                            titleFontColor: "#4F81BC",
                            lineColor: "#4F81BC",
                            labelFontColor: "#4F81BC",
                            tickColor: "#4F81BC",
                            titleFontSize: 24,
                            includeZero: false
                        },
                        axisY2: {
                            title: "Expense of the Month",
                            titleFontColor: "#C0504E",
                            lineColor: "#C0504E",
                            labelFontColor: "#C0504E",
                            tickColor: "#C0504E",
                            titleFontSize: 24,
                            includeZero: false
                        },
                        toolTip: {
                            shared: true
                        },
                        legend: {
                            cursor: "pointer",
                            itemclick: toggleDataSeries
                        },

                        data:

                            [{
                                type: "spline",
                            name: "Income of the Month",
                            showInLegend: true,
                            xValueFormatString: "MMM YYYY",
                            yValueFormatString: "Rs ####",
                            dataPoints: dataPoints

                        },
                        {
                        type: "spline",
                         name: "Expense of the Month",
                           axisYType: "secondary",
                          showInLegend: true,
                           xValueFormatString: "MMM YYYY",
                           yValueFormatString: "Rs ###",
                          dataPoints: dataPointsExpense
                       }
                        ]
                    };
                    $("#chartContainer").CanvasJSChart(chart);

                    function toggleDataSeries(e) {
                        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                            e.dataSeries.visible = false;
                        } else {
                            e.dataSeries.visible = true;
                        }
                        e.chart.render();
                    }
                    $.getJSON("/Home/reportup", addData)



        }

    </script>
 <br /><br />

        <button style="margin-left:300px; margin-top:10px" type="button" id="btn" onclick="showchart()">Show my chart</button>
        <div id="chartContainer"  style ="height: 300px; width: 100%;margin: 50px auto;"></div>




 <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

    <script src="/jquery.canvasjs.min.js"></script>

    <script src="/canvasjs.min.js"></script>
    <script src="/canvasjs.react.js"></script>


</body>



</html>

Answer 1

（1）您永远不会将图表分配给图表

  chart = (something else)
  // reuse the variable, should probably just rename the other one
  chart = $("#chartContainer").CanvasJSChart(chart);

在这里工作

https://jsfiddle.net/mh1zro3v/

（我删除了闭包，没有必要，我还用垃圾代码保存了它，已修复）

Chart.render（）不是函数

1 个答案: