HTML顯示JavaScript中的數據「數據」

以下JavaScript代碼用於在表格中顯示錶格數據。HTML顯示JavaScript中的數據「數據」

<script type="text/javascript"> 
     $(function() { 
      $('#container').highcharts({ 
       data: { 
        table: 'datatable' 
       }, 
       chart: { 
        type: 'column' 
       }, 
       title: { 
        text: 'Results' 
       }, 
       yAxis: { 
        allowDecimals: false, 
        title: { 
         text: 'Units' 
        } 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>' + this.series.name + '</b><br/>' + 
          this.point.y + ' ' + this.point.name.toLowerCase(); 
        } 
       } 
      }); 
     }); 
    </script>

HTML代碼保持數據：

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

<table id="datatable"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Jane</th> 
      <th>John</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>Apples</th> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <th>Pears</th> 
      <td>2</td> 
      <td>0</td> 
     </tr> 
    </tbody> 
</table>

我也有我的HTML以下值：

<div id="name"> </div> 
<div id="age"></div>

「名」和「時代」的值不同。我怎樣才能將這些值落實到圖表中而不是數據中：（Jane，John，Apples，Pears）。這可能嗎？

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-parsed/

也就是說怎麼樣我的圖表顯示大氣壓的。我可以在圖表上添加「名稱」和「年齡」嗎？

來源

2016-04-21 userdanhas1994

你的名字/年齡裏面是什麼，也表？ –

你的問題有點含糊，但我會盡我所能提供幫助。我相信如果提供更多信息，我們都可以提供更好的答案，例如：

您想要在圖表上顯示的數據是什麼？

你想測量什麼值？例如，你是在測量幾年？

您是在測量同一人的不同元素還是不同人的相同元素？

我假設，當您聲明要在圖表上顯示「名稱」和「年齡」而不是示例中提供的內容時，您希望顯示年齡爲測量值的名稱。如果是這樣的話，那麼這就是我想出的。

JSFiddle: Javascript HighChart Example with Age as Measuring Value

HTML代碼

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript代碼

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Age of Major Life Events' 
     }, 
     subtitle: { 
      text: 'Created By: <a href="http://www.rocketrisa.com">Rocket Risa</a>' 
     }, 
     xAxis: { 
      categories: ['John', 'Jane', 'Jessica', 'Jordan', 'Jeri'], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Age (years)', 
       align: 'high' 
      }, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     tooltip: { 
      valueSuffix: ' years' 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -40, 
      y: 80, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Teen', 
      data: [15, 13, 18, 14, 17] 
     }, { 
      name: 'Young Adult', 
      data: [23, 28, 21, 25, 27] 
     }, { 
      name: 'Middle Age 30+', 
      data: [35, 46, 32, 64, 51] 
     }] 
    }); 
});

來源

2016-04-21 20:14:55

HTML顯示JavaScript中的數據「數據」

回答

相關問題