Highcharts - 在同一页面中多次相同的图表

Question

如何使用 same page same data 中的多个图表？

我正在尝试如下，但只是让第一张图表工作

<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>

＆＃13;

＆＃13;

$(function () {
  // Everything in common between the charts
  var commonOptions = {
    colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      labels: {
        style:{ color: '#bbb' }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' }
      },
      tickInterval: 100,
      lineColor: '#e4e4e4',
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
    }],

    // Area Chart
    plotOptions: {
      area: {
        stacking: 'normal',
        lineWidth: 1,
        fillOpacity: 0.1,
        marker: {
          lineWidth: 1.5,
          symbol: 'circle',
          fillColor: 'white',
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  $('.areaChartTwoWay').highcharts(Highcharts.merge(commonOptions, {
    chart: { type: 'area' },
    xAxis: {
      title: { text: 'Days', },
      text: 'Date',
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%eth %b'
      },
    },
    yAxis: {
      title: { text: 'Count', },
    },
    series: [{
      name: 'Legend 2',
      lineColor: '#fb8b4b',
      marker: { lineColor: '#fb8b4b', fillColor: 'white', },
      data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
      legendIndex:1,
      pointStart: Date.UTC(2016, 2, 11),
      pointInterval: 24 * 3600 * 1000 // one day
    }, {
      name: 'Legend 1',
      lineColor: '#99cc03',
      marker: { lineColor: '#99cc03', fillColor: 'white', },
      data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
      legendIndex:0,
      pointStart: Date.UTC(2016, 2, 11),
      pointInterval: 24 * 3600 * 1000 // one day
    }]
  }));

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试在每个（..）中调用highchart调用，如下所示：

class description

$(function () {
  // Everything in common between the charts
  var commonOptions = {
    colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
    chart: {
      style: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12px',
        color: '#585858',
      }
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      labels: {
        style:{ color: '#bbb' }
      },
      lineColor: '#e4e4e4',
      lineWidth: 1,
      tickLength: 0,
    },
    yAxis: {
      title: {
        style: {
          fontFamily: 'Roboto',
          color: "#bbb",
        }
      },
      offset:-6,
      labels: {
        style:{ color: '#bbb' }
      },
      tickInterval: 100,
      lineColor: '#e4e4e4',
      lineWidth: 1,
      gridLineDashStyle: 'dash',
    },
    series: [{
      backgroundColor: "rgba(0 ,0, 0, 0.5)",
    }],

    // Area Chart
    plotOptions: {
      area: {
        stacking: 'normal',
        lineWidth: 1,
        fillOpacity: 0.1,
        marker: {
          lineWidth: 1.5,
          symbol: 'circle',
          fillColor: 'white',
        },
        legend: {
          radius: 2,
        }
      }
    },
    tooltip: {
      useHTML: true,
      shared: true,
      backgroundColor: '#5f5f5f',
      borderWidth: 0,
      style: {
        padding:10,
        color: '#fefefe',
      }
    },
    legend: {
      itemStyle: {
        fontFamily: 'Roboto Light',
        fontWeight: 'normal',
        fontSize: '12',
        color: '#666666',
      },
      marker: {
        symbol: 'square',
        verticalAlign: 'middle',
        radius: '4',
      },
      symbolHeight: 6,
      symbolWidth: 6,
    },
  };

  $('.areaChartTwoWay').each(function() {
$(this).highcharts(Highcharts.merge(commonOptions, {
    chart: { type: 'area' },
    xAxis: {
      title: { text: 'Days', },
      text: 'Date',
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%eth %b'
      },
    },
    yAxis: {
      title: { text: 'Count', },
    },
    series: [{
      name: 'Legend 2',
      lineColor: '#fb8b4b',
      marker: { lineColor: '#fb8b4b', fillColor: 'white', },
      data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
      legendIndex:1,
      pointStart: Date.UTC(2016, 2, 11),
      pointInterval: 24 * 3600 * 1000 // one day
    }, {
      name: 'Legend 1',
      lineColor: '#99cc03',
      marker: { lineColor: '#99cc03', fillColor: 'white', },
      data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
      legendIndex:0,
      pointStart: Date.UTC(2016, 2, 11),
      pointInterval: 24 * 3600 * 1000 // one day
    }]
  }))});

  $('.highcharts-grid > path:last-child').remove();
  $('.highcharts-markers > path:last-child').remove();

});