Question

我正在尝试使用line-chart创建一个HighCharts.js，它也应该以表格格式显示数据。但是必须对数据进行分组，而不是对图形进行精确输入。

正常导出显示准确的输入数据。例如1月0日，2月2日等。

但是我想显示一个表，其中建议数据为0、1、2、3的月份数。

+------+-------+
| Data | Count |
+------+-------+
| 0    | 2     |
+------+-------+
| 1    | 2     |
+------+-------+
| 2    | 4     |
+------+-------+
| 3    | 1     |
+------+-------+

Highcharts.chart('container', {
    title: {
        text: 'Data Table Example'
    },
    
    chart: {
        borderWidth: 1,
        borderColor: '#ccc',
        spacingBottom: 30
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [0, 2, 1, 3, 2, 2, 1, 0, 2],
    }],
    exporting: {
        showTable: true
    }

});

.chart-outer {
    max-width: 800px;
    margin: 2em auto;
}
#container {    
    height: 300px;
    margin-top: 2em;
    min-width: 380px;
}
.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    border: 1px solid silver;
    padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #eff;
}
.highcharts-data-table caption {
    border-bottom: none;
    font-size: 1.1em;
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div class="chart-outer">
    <div id="container"></div>
    <!-- data table is inserted here -->
</div>

更新：我们正在使用Json Object作为图表的输入，并且已经使用highchart导出选项导出了表格。

HighChart数据表自定义导出

0 个答案: