Question

我正在使用canvas.js liberary中的气泡图，我从xml获取值并传递其数据点，但气泡未显示。

检查下面的代码示例 - HTML在这里 -

 <div id="img2">
    <div id="chart1" style = "height: 281px; width: 500px;"></div>
 </div>

XML就在这里 -

<totalCallsChart>
    <label>NI_02</label>
    <label>NI_03</label>
    <label>NI_07</label>
    <label>NI_08</label>
    <label>NI_11</label>

    <xText>16</xText>
    <xText>31</xText>
    <xText>31</xText>
    <xText>37</xText>
    <xText>70</xText>

    <yText>3200</yText>
    <yText>1500</yText>
    <yText>-1500</yText>
    <yText>4100</yText>
    <yText>1200</yText>

    <zText>200.90</zText>
    <zText>237.414</zText>
    <zText>306</zText>
    <zText>320.71</zText>
    <zText>161.81</zText>
</totalCallsChart>

我的xmlParser函数 -

  function xmlParser(xml){
        pgXml = $.xmlToJSON(xml) ;
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].xText.length ; i++){
            getChartXValues.push(pgXml.pageContent[0].totalCallsChart[0].xText[i].Text);
        }
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].yText.length ; i++){
            getChartYValues.push(pgXml.pageContent[0].totalCallsChart[0].yText[i].Text);
        }
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].zText.length ; i++){
            getChartZValues.push(pgXml.pageContent[0].totalCallsChart[0].zText[i].Text);
        }
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].label.length ; i++){
            getChartLabelValues.push(pgXml.pageContent[0].totalCallsChart[0].label[i].Text);
        }
    }

Javascript就在这里 -

   var dps = [{x: getChartXValues[0], y: getChartYValues[0], z: getChartZValues[0], label: getChartLabelValues[0]},{ x: getChartXValues[1], y: getChartYValues[1], z: getChartZValues[1], label: getChartLabelValues[1]},{ x: getChartXValues[2], y: getChartYValues[2], z: getChartZValues[2], label: getChartLabelValues[2]},{ x: getChartXValues[3], y: getChartYValues[3], z: getChartZValues[3], label: getChartLabelValues[3]},{ x: getChartXValues[4], y: getChartYValues[4], z: getChartZValues[4], label: getChartLabelValues[4]}];


        for(var i=0; i<dps.length;i++){
        console.log("dps: "  +dps[i].x + " " + dps[i].y +" "+ dps[i].z + " " +dps[i].label);
        var totalCallsChart = new CanvasJS.Chart("chart1", {
          theme: "theme2",
          height:281,
          title: {
            text: ""
        },
        axisX: {
            maximum: 90,
            minimum: 0,
            interval: 15,
            titleFontSize: 8,
            titleFontColor: "#83A7D0",
            title: "Total Calls MAT"
        },
        axisY: {
            maximum: 6000,
            minimum: -3000,
            interval: 1000,
            titleFontSize: 8,
            titleFontColor: "#83A7D0",
            title: "Absolute Market Growth"
        },
        legend:{
            verticalAlign: "bottom",
            horizontalAlign: "center",
            fontweight: "bold"
        },
        data: [
            {
                type: "bubble",
                showInLegend: true,
                legendText: getChartLabelValues[0],
                dataPoints: [
                    { x:dps[i].x, y: dps[i].y, z: dps[i].z, label: dps[i].length}
                ]
            }
    ]
    });

        totalCallsChart.render();
    }

检查上面我在数据点中传递动态值，但是它不接受，它显示空白图表。请帮帮我

使用canvas.js气泡图在气泡图中不显示气泡

0 个答案: