Question

我想嵌入包含CanvasJS库中图表的HTML文件。问题是图表没有渲染。我在标签下面写的文本在我的React组件中呈现。然而，图表没有。是否与window.onload函数有关？

 <!DOCTYPE HTML>
<html>

<head>  

<script type="text/javascript" src="../../../www/canvasjs.min.js"></script>

</head>
<body>
            THIS TEXT RENDERS
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>


        <script type="text/javascript">

    window.onload = function() {

        var chart = new CanvasJS.Chart("chartContainer", {

            title:{
                text:"Fortune Global 500 Companies by Country"              

            },
                        animationEnabled: true,
            axisX:{
                interval: 1,
                gridThickness: 0,
                labelFontSize: 10,
                labelFontStyle: "normal",
                labelFontWeight: "normal",
                labelFontFamily: "Lucida Sans Unicode"

            },
            axisY2:{
                interlacedColor: "rgba(1,77,101,.2)",
                gridColor: "rgba(1,77,101,.1)"

            },

            data: [
            {     
                type: "bar",
                name: "companies",
                axisYType: "secondary",
                color: "#014D65",               
                dataPoints: [

                {y: 5, label: "Sweden"  },
                {y: 6, label: "Taiwan"  },
                {y: 7, label: "Russia"  },
                {y: 8, label: "Spain"  },
                {y: 8, label: "Brazil"  },
                {y: 8, label: "India"  },
                {y: 9, label: "Italy"  },
                {y: 9, label: "Australia"  },
                {y: 12, label: "Canada"  },
                {y: 13, label: "South Korea"  },
                {y: 13, label: "Netherlands"  },
                {y: 15, label: "Switzerland"  },
                {y: 28, label: "Britain" },
                {y: 32, label: "Germany"   },
                {y: 32, label: "France"  },
                {y: 68, label: "Japan"   },
                {y: 73, label: "China"},
                {y: 132, label: "US" }
                ]
            }

            ]
        });


chart.render();
}
</script>   

</body>
</html>

我在React中的render（）：

render() {

    return (
      <div >
      {renderHTML(Chart)} 
         <div dangerouslySetInnerHTML={ {__html: Chart} } />
      </div>
    )

  }

的WebPack

const path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: [
    './main.js',
  ],
  output: {
    path: path.join(__dirname, 'www'),
    filename: 'bundle.js',
  },
  module: {

    rules: [

      {
        test: /\.js$/,exclude: /node_modules/,
        exclude: /(node_modules|bower_components)/,
        use: [
          'babel-loader',
        ],
      },
      {
      test: /\.html/,
      loader : 'html-loader'
      },
   {


    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false',

    ]
  },

    ],

  },
  resolve: {

    modules: [
      path.join(__dirname, 'node_modules'),

    ],
  },
};

将HTML文件嵌入react-component中

0 个答案: