我正在使用Highcharts.js插件,一切都很好,但是我想显示的是例如以下数据:


  1,5,10,20


这里的问题是,每个值都显示在一个列中,而我想要的是将所有值都显示在一个列中,所以我的问题是我该怎么做才能显示想要的图表?这是我当前的代码:



$(document).ready(function() {
  $('#xd').click(function() {
    draw();
  });
});

function draw() {
  var myArray = [];
  myArray = [1, 5, 10, 11, 8];

  $('#grafic').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Sampled Parts'
    },
    xAxis: {
      categories: ['Data'],
      labels: {
        rotation: -33,
      }
    },
    yAxis: {
      allowDecimals: true,
      min: 0,
      title: {
        text: 'Resultados'
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' +
          this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },

    legend: {
      reversed: true
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'My Data',
      data: myArray
    }]
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>






<div id="grafic">
</div>

<button id="xd">Click</button>





如果您看到我的代码,我有5列,而我想要的是将所有值都放在一个列中,但是老实说,我不知道该怎么办。

Codepen code

最佳答案

如果要堆叠值,则需要创建多个序列(我想每个序列中都只有一个值)。从此更改:

var myArray = [];
myArray = [1, 5, 10, 11, 8];


对此:

series: [{
      name: 'mydata',
      data: [1]
    }, {
      name: 'mydata2',
      data: [5]
    }, {
      name: 'mydata3',
      data: [10]
    }, {
      name: 'mydata4',
      data: [11]
    }, {
      name: 'mydata5',
      data: [8]
    }]


请参阅下面的运行示例:



$(document).ready(function() {
  $('#xd').click(function() {
    draw();
  });
});

function draw() {
  $('#grafic').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Sampled Parts'
    },
    xAxis: {
      categories: ['Data'],
      labels: {
        rotation: -33,
      }
    },
    yAxis: {
      allowDecimals: true,
      min: 0,
      title: {
        text: 'Resultados'
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' +
          this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },

    legend: {
      reversed: true
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    //  var myArray = [];
    //  myArray = [1, 5, 10, 11, 8];

    series: [{
      name: 'mydata',
      data: [1]
    }, {
      name: 'mydata2',
      data: [5]
    }, {
      name: 'mydata3',
      data: [10]
    }, {
      name: 'mydata4',
      data: [11]
    }, {
      name: 'mydata5',
      data: [8]
    }]
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="grafic">
</div>

<button id="xd">Click</button>

关于javascript - 如何将数据放在一栏中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40368098/

10-11 06:51