Question

我试图在本地此文件上执行

https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/test_DataSeries.html

但我有这个错误：

未捕获的TypeError：无法读取未定义的属性'ItemFileWriteStore'

当我在本地运行此代码时：

你会介意帮我吗？谢谢!!

<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
    <head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
    <head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataSeries Test</title>
https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/test_DataSeries.html
<link rel="stylesheet" href="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dijit/tests/css/dijitTests.css"/>

<style>
    .dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px;}
    .dojoxLegendText {vertical-align: text-top; padding-right: 10px}

    #charts {
        clear: both;
        margin-bottom: 50px;
    }
    .chart-area {
        float: left;
        border: 1px solid #ccc;
        width:  450px;
        height: 350px;
        margin: 3px;
    }
    .chart {
        width:  450px;
        height: 300px;
    }
</style>

<script src="https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true"></script>

<script>

    dojo.require("dojox.charting.Chart");
    dojo.require("dojox.charting.DataSeries");
    dojo.require("dojox.charting.themes.ThreeD");
    dojo.require("dojox.charting.widget.Legend");

    dojo.require("dojox.charting.axis2d.Default");

    dojo.require("dojox.charting.plot2d.Markers");
    dojo.require("dojox.charting.plot2d.Columns");
    dojo.require("dojox.charting.plot2d.Pie");

    dojo.require("dojox.charting.action2d.Tooltip");
    dojo.require("dojox.charting.action2d.MoveSlice");
    dojo.require("dojox.charting.action2d.Magnify");
    dojo.require("dojox.charting.action2d.Shake");

    dojo.require("dojo.data");
    dojo.require("dojo.data.ItemFileWriteStore");

    dojo.require("dijit.form.NumberSpinner");

    var store = new dojo.data.ItemFileWriteStore({url: "https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/stock.json"});

    function addLegend(chart, node){
        var legend = new dojox.charting.widget.Legend({chart: chart}, node);
        dojo.connect(chart, "render", legend, "refresh");
    }

    var templates = {
        low:   "<strong>{0}</strong>: <strong>low {1}</strong> &ndash; {2} &ndash; {3}",
        price: "<strong>{0}</strong>: {1} &ndash; <strong>price {2}</strong> &ndash; {3}",
        high:  "<strong>{0}</strong>: {1} &ndash; {2} &ndash; <strong>high {3}</strong>"
    };

    function valTrans(value, store, item){
        return {
            y: store.getValue(item, value),
            tooltip: dojo.replace(
                templates[value],
                dojo.map(["symbol", "low", "price", "high"], function(field){
                    return store.getValue(item, field);
                })
            )
        };
    }

    var chartL, chartC, chartP;

    makeCharts = function(){
        chartL = new dojox.charting.Chart("lines").
                setTheme(dojox.charting.themes.ThreeD).
                addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, majorTickStep: 5}).
                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
                addPlot("default", {type: dojox.charting.plot2d.Markers}).
                addSeries("Price", new dojox.charting.DataSeries(
                    store, {query: {symbol: "*"}}, "price")).
                render();
        addLegend(chartL, "lines_legend");
        new dojox.charting.action2d.Magnify(chartL);
        new dojox.charting.action2d.Tooltip(chartL);

        chartC = new dojox.charting.Chart("cols").
                setTheme(dojox.charting.themes.ThreeD).
                addAxis("x", {natural: true}).
                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}).
                addPlot("default", {type: dojox.charting.plot2d.Columns}).
                addSeries("Low", new dojox.charting.DataSeries(
                    store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "low"))).
                addSeries("Price", new dojox.charting.DataSeries(
                    store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "price"))).
                addSeries("High", new dojox.charting.DataSeries(
                    store, {query: {symbol: "*"}}, dojo.hitch(null, valTrans, "high"))).
                render();
        addLegend(chartC, "cols_legend");
        new dojox.charting.action2d.Shake(chartC, "default", {shiftY: 0});
        new dojox.charting.action2d.Tooltip(chartC);

        chartP = new dojox.charting.Chart("pie").
                setTheme(dojox.charting.themes.ThreeD).
                addPlot("default", {type: dojox.charting.plot2d.Pie, radius: 125}).
                addSeries("Price", new dojox.charting.DataSeries(
                    store, {query: {symbol: "*"}}, {y: "price", text: "symbol", tooltip: "price"})).
                render();
        addLegend(chartP, "pie_legend");
        new dojox.charting.action2d.Tooltip(chartP);
        new dojox.charting.action2d.MoveSlice(chartP);
    };

    makeSpinners = function(items){
        dojo.forEach(items, function(m){
            var nm = store.getLabel(m);
            var num = store.getValue(m, "price");
            console.log(nm, num);
            var w = new dijit.form.NumberSpinner({
                onChange: function(val){
                    val = val===0 ? 0.01 : val; //HACKS the no label-when-zero bug
                    console.log("OC:", nm, val);
                    store.setValue(m, "price", val);
                    //store.setValues(m, "historicPrice", store.getValues("historicPrice").push(val));
                    console.log("OC:", nm, val);
                },
                value: num,
                constraints: {min:0, max:10,places:2},
                className: "myField",
                intermediateChanges: true
            });
            dojo.place('<label>'+nm+'</label>', dojo.byId("spinners"), "last")
            dojo.place(w.domNode, "spinners", "last")
        });

        var labels = dojo.map(items, function(item, index){
                return {
                    value: index + 1,
                    text:  store.getLabel(item)
                }
            });
        chartC.addAxis("x", {natural: true, labels: labels}).render();
    }

    dojo.addOnLoad(function(){
        makeCharts();
        console.log(store.getFeatures())
        store.fetch({query:{symbol:"*"}, onComplete: makeSpinners, onError:function(err){console.error(err)}})
    });
</script>

</head>

<body class="claro">
    <h1>DataSeries Test</h1>
    <p>
        Use the spinner fields at the bottom to change the data. The charts listen to store changes an update automatically.
    </p>
    <div id="charts">
        <div class="chart-area">
            <div id="lines_legend"></div>
            <div id="lines" class="chart"></div>
        </div>
        <div class="chart-area">
            <div id="cols_legend"></div>
            <div id="cols" class="chart"></div>
        </div>  
        <div class="chart-area">
            <div id="pie_legend"></div>
            <div id="pie" class="chart"></div>
        </div>
    </div>
    <div id="spinners"></div>
</body>
</html>

Answer 1

你的问题包括两件事：

dojo.data不存在，因此dojo.require("dojo.data")会导致404 Not Found错误（此行代码不在您复制的示例文件中）
你试图制作新的itemfilestore＆＃39;在onload / dojo.ready完成之前

关于＃2，这是一个问题，因为你从远程获取dojo，换句话说dojo.require作为异步函数

一旦按顺序获得这些内容，就会出现第三个问题。您可能不会对ItemFileWriteStore使用跨域/跨协议资源。因此，以下代码将失败并出现安全性异常：

makeCharts = function(){
    console.log('makeCharts: is wrapped in onload');
    store = new dojo.data.ItemFileWriteStore({url: "https://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/charting/tests/stock.json"});
    store.fetch();

修复可能是将stock.json下载到本地磁盘并从那里引用商店网址

未捕获的TypeError：无法读取未定义的属性'ItemFileWriteStore'

1 个答案: