Question

你好我现在正在学习JavaScript。我想在我的图表上使用事件点击将点X和Y插入到数据库中。

我正在使用this tutorial来创建图片。现在当我在我的图表中按下单击时想要从画布获得坐标时，我发现了问题。

这里是我在JavaScript中的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Chart Demo</title>
    <script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="Scripts/canvasChart.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var dataDef = { title: "US Population Chart",
                            xLabel: 'Year', 
                            yLabel: 'Population (millions)',
                            labelFont: '19pt Arial', 
                            dataPointFont: '10pt Arial',
                            renderTypes: [CanvasChart.renderType.lines, CanvasChart.renderType.points],
                            dataPoints: [{ x: '0', y: 25 }, 
                                         { x: '1810', y: 70 }, 
                                         { x: '1830', y: 12.8 }, 
                                         { x: '1850', y: 23.1 },
                                         { x: '1870', y: 36.5 },
                                         { x: '1890', y: 62.9 }, 
                                         { x: '1910', y: 92.2 },
                                         { x: '1930', y: 123.2 },
                                         { x: '1950', y: 151.3 }, 
                                         { x: '1970', y: 203.2 },
                                         { x: '1990', y: 248.7 }, 
                                         { x: '2010', y: 308.7}]
                           };
            CanvasChart.render('canvas', dataDef);
        });

        $(function(){
            $("#canvas").click(function(event){
                var dataDef = { title: "US Population Chart",
                            xLabel: 'Year', 
                            yLabel: 'Population (millions)',
                            labelFont: '19pt Arial', 
                            dataPointFont: '10pt Arial',
                            renderTypes: [CanvasChart.renderType.lines, CanvasChart.renderType.points],
                            dataPoints: [{ x: '0', y: 25 }, 
                                         { x: '1810', y: 70 }, 
                                         { x: '1830', y: 12.8 }, 
                                         { x: '1850', y: 23.1 },
                                         { x: '1870', y: 36.5 },
                                         { x: '1890', y: 62.9 }, 
                                         { x: '1910', y: 92.2 },
                                         { x: '1930', y: 123.2 },
                                         { x: '1950', y: 151.3 }, 
                                         { x: '1970', y: 203.2 },
                                         { x: '1990', y: 248.7 }, 
                                         { x: '2010', y: 308.7}
                            ]
                           };
                alert(dataDef[dataPoints[0]]); 

        });
        });
    </script>
</head>
<body style="margin-left:50px;margin-top:50px;">
    <canvas id="canvas" width="800" height="600"></canvas>
    <div class="log"></div> 
</body>
</html>

我希望你能帮助我。非常感谢你。如果您想在jsfiddle https://jsfiddle.net/fatchul/6wgLxkss/#&togetherjs=NPCnP60gNJ

中进行协作，那就是这样

如何从数组javascript中的元素获取数据？

0 个答案: