Question

我正在尝试使用表中的数据来创建使用rails中的高图表的条形图。我有一个名为school的表，它包含两列，即名称和出勤率。我想在x-上显示学生姓名轴和y轴上的出席。我的JavaScript代码是：

$(function () {
    // Create the chart
    $('#student')high-charts({
       chart: {
            type: 'column'
         },
        title: {
           text: 'student details'
       },
        x Axis: {
        type: 'category'
         },
        y Axis: {
           title: {
              text: 'Total attendance'
          }

    },
    legend: {
        enabled: false
    },
    plot-options: {
        series: {
            border-width: 0,
            data-labels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tool-tip: {
        header-format: '<span style="font-size:11px">{series.name}</span>     <Br>',
        point-format: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<BR/>'
    },
series: [ {
            name: 'Stu',
            id: 'Stu',
            data: [
                [<%= @students.each do |s|%>
                   '<%= s.name %>',
                    <%= s.attendance%>
                 <%end%>

                ]

            ]
        }

在我的HTML中我有：

<div class="col-md-8">
   <div class="x_panel">
        <div id="student" style="min-width: 310px; height: 400px; margin: 0 auto">
        </div>
  </div>
 </div>

我无法加载条形图。请帮助

Answer 1

试试这个

$(function () {
// Create the chart

new Highcharts.Chart({
chart: { renderTo: 'student' },
    title: {
       text: 'student details'
   },
    x Axis: {
    type: 'category'
     },
    y Axis: {
       title: {
          text: 'Total attendance'
      }

},
legend: {
    enabled: false
},
plot-options: {
    series: {
        border-width: 0,
        data-labels: {
            enabled: true,
            format: '{point.y:.1f}%'
        }
    }
},

tool-tip: {
    header-format: '<span style="font-size:11px">{series.name}</span>     <

Br>',
        point-format: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<BR/>'
    },
series: [ {
            name: 'Stu',
            id: 'Stu',
            data: [
                [<%= @students.each do |s|%>
                   '<%= s.name %>',
                    <%= s.attendance%>
                 <%end%>

                ]

            ]
        }

创建新的高图并在图表中渲染div

使用表中的数据创建高级图表

1 个答案: