javascript - 如何将 Highcharts 图表渲染到用户选择的 DIV 中

Question

我有多个按钮，以 map 和 Highcharts 图表的形式表示 Web 服务，用户可以将其拖放到页面上的多个容器 (DIV) 之一中，然后在其中显示这些 Web 服务。

它适用于 map /图像网络服务。但我不清楚如何使用 Highcharts 图表实现这一点。我想我必须在某处指示一个 Chart.renderTo("DIVx")，但不确定该过程。

我设置了 fiddle here 。目前，图表显示在 DIV“容器”中。但这应该会消失，一旦用户将按钮“Graph::XXX”拖到其中一个 DIV 中，图表就会显示在那里。

HTML部分:

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <!-- this container should disappear -->
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    <!-- buttons -->
    <div id="map_npp" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
      <h4 style="float: left">Map :: NPP</h4>
    </div>
    <div id="map_precipitations" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
      <h4 style="float: left">Map :: Precipitations</h4>
    </div>
    <div id="map_temperature" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
      <h4 style="float: left">Map :: Temperature</h4>
    </div>
    <div id="graph_gdp" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
      <h4 style="float: left">Graph :: GDP</h4>
    </div>
    <div id="graph_xxx" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
      <h4 style="float: left">Graph :: XXX</h4>
    </div>

    <br clear="all" />

    <!-- dropzone DIVs -->
    <div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
    <div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
    <div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
    <div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>

图表的 javascript/jquery 部分:

    var csv = "2010/01/01,51.67074582499006,13.789093928493081,-0.0010074468085106377\n" +
      "2010/02/01,51.67074582499006,13.789093928493081,0.0024117021276595747\n" +
      "2010/03/01,51.67074582499006,13.789093928493081,0.026550000000000004\n" +
      "2010/04/01,51.67074582499006,13.789093928493081,0.08252659574468087\n" +
      "2010/05/01,51.67074582499006,13.789093928493081,0.12837446808510639\n" +
      "2010/06/01,51.67074582499006,13.789093928493081,0.140618085106383\n" +
      "2010/07/01,51.67074582499006,13.789093928493081,0.0668787234042553\n" +
      "2010/08/01,51.67074582499006,13.789093928493081,0.10335744680851064\n" +
      "2010/09/01,51.67074582499006,13.789093928493081,0.08095000000000001\n" +
      "2010/10/01,51.67074582499006,13.789093928493081,0.0400159574468085\n" +
      "2010/11/01,51.67074582499006,13.789093928493081,0.004214893617021277\n" +
      "2010/12/01,51.67074582499006,13.789093928493081,-0.0018680851063829788\n" +
      "2011/01/01,51.67074582499006,13.789093928493081,0.0011914893617021279\n" +
      "2011/02/01,51.67074582499006,13.789093928493081,0.003752127659574468\n" +
      "2011/03/01,51.67074582499006,13.789093928493081,0.027225531914893623"

    function extract(csv) {
      var rows = csv.split(/\r\n|\n/);
      var data;
      var series = [];
      var serie = {
        name: -1,
        data: []
      };
      for (var i = 0; i < rows.length; i++) {
        data = rows[i].split(',');
        if (serie.name === -1) {
          serie.name = data[0].substr(0, 4);
        } else {
          if (serie.name !== data[0].substr(0, 4)) {
            series.push(serie);
            serie = {
              name: data[0].substr(0, 4),
              data: []
            };
          }
        }
        serie.data.push(parseFloat(data[3]));
      }
      series.push(serie);
      return series;
    }

    $(function() {
      Highcharts.chart('container', {
        title: {
          text: 'Monthly Average Temperature',
          x: -20 //center
        },
        subtitle: {
          text: 'Source: WorldClimate.com',
          x: -20
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
          ]
        },
        yAxis: {
          title: {
            text: 'Temperature (°C)'
          },
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
        },
        tooltip: {
          valueSuffix: '°C'
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          borderWidth: 0
        },
        series: extract(csv),
      });
    });

可拖动按钮和目标 DIV 的 javascript/jquery 部分:

    //just to know which button is being dragged we will use this variable
    var draggingDiv;

    function onDragOver(e) {
      e.preventDefault();
      e.target.classList.add("over-me");
    }

    function onDragLeave(e) {
      e.target.classList.add("static");
      e.target.classList.remove("over-me");
    }

    function onDragStart(e) {
      draggingDiv = e.target;
      e.target.innerHTML = "<h4>You are Dragging me</h4>";
    }

    function onDragEnd(e) {

      e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
      e.target.parentElement.classList.add("static");
      draggingDiv.innerHTML = "<h4>Dragged once Can't drag me now:)</h4>";
      // e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>"; 
    }

    function onDrop(e) {
      e.preventDefault();
      e.target.classList.remove("over-me");
      //uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
      //draggingDiv.draggable=false;
      //e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
      //e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>";
      if (draggingDiv.id == "map_npp") {
        e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
      } else if (draggingDiv.id == "map_precipitations") {
        e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
      } else if (draggingDiv.id == "map_temperature") {
        e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
      } else if (draggingDiv.id == "graph_gdp") {
        e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
      } else if (draggingDiv.id == "graph_xxx") {
        e.target.innerHTML = "<img style='margin-top: 0' src='http://npp.unepgrid.ch/images/wms_fake.png'>";
      }
    }

感谢您提供如何实现此功能的任何提示。

Answer 1

您需要渲染图表 onDrop 事件。图表的容器将是该事件的目标。可以通过 chart.renderTo 属性或作为图表构造函数中的参数来设置将在其中呈现图表的元素 - 请参阅 API .

示例如下。在创建新图表之前，我还会销毁之前的图表。

var chart;

function onDrop(e) {
  e.preventDefault();
  e.target.classList.remove("over-me");

  if (chart) {
    chart.destroy();
  }

  var options = {
    chart: {},
    series: [{
      data: [1,2,3,4,5]
    }]
  };

  if (draggingDiv.id == "map_npp") {
  } else if (draggingDiv.id == "map_precipitations") {
    options.chart.type = 'column';
  } else if (draggingDiv.id == "map_temperature") {
  } else if (draggingDiv.id == "graph_gdp") {
    options.series.data = [5,4,3,2,1];
  } else if (draggingDiv.id == "graph_xxx") {
    options.series.data = [5,4,3,2,1];
    options.chart.type = 'column';
  }

  chart = Highcharts.chart(e.target, options);
}

示例:https://jsfiddle.net/1nye1zk7/