Question

我是JavaScript的新手，但真的对amCharts感到惊讶。

所以，我在网上搜索了很多东西后问：是否有可能（或有人可以告诉我如何）将表格作为amCharts图表上的工具提示？

我的意思是：我有一个基于“日期”的趋势图，如果我点击一天中的某个日期，请查看弹出窗口，其中包含当天数据详情的表格。

Answer 1

搜索并尝试了很多代码，我找到了可能的解决方案。所以，考虑到这里没有类似的问题，或者像我问的那样开发，我发布我的解决方案来分享它。

您可以尝试点击＆＃34; RUN＆＃34;：当您点击图表点时，显示的HTML表格显示为数据填充（本例中为假值）。

这是SNIPPET：

＆＃13;

function createTable(){
    var table = "<table>";

    table += "<thead>";
       table += "<tr>";
            table +="<th> Dealer </th>";
    		table +="<th> Percent </th>";
            table +="<th> Proportional </th>";
        table +="</tr>";
    table +="</thead>";
    table +="<tbody>";
    for(var i=0;i<200;i++){
            table += "<tr>";
            table +="<td> New York </td>";
    		table +="<td> "+Math.random();+" </td>";
            table +="<td> "+Math.random();+" </td>";
            table +="</tr>";
    };
	
    table += "</tbody>";
    table += "</table>";

    return table;
};

var chartData = [{
    date: new Date(2012, 0, 1),
    distance: 227,
    duration: 408},
{
    date: new Date(2012, 0, 2),
    distance: 371,
    duration: 482},
{
    date: new Date(2012, 0, 3),
    distance: 433,
    duration: 562},
{
    date: new Date(2012, 0, 4),
    distance: 345,
    duration: 379},
{
    date: new Date(2012, 0, 5),
    distance: 480,
    duration: 501},
{
    date: new Date(2012, 0, 6),
    distance: 386,
    duration: 443},
{
    date: new Date(2012, 0, 7),
    distance: 348,
    duration: 405},
{
    date: new Date(2012, 0, 8),
    distance: 238,
    duration: 309},
{
    date: new Date(2012, 0, 9),
    distance: 218,
    duration: 287},
{
    date: new Date(2012, 0, 10),
    distance: 349,
    duration: 485},
{
    date: new Date(2012, 0, 11),
    distance: 603,
    duration: 890},
{
    date: new Date(2012, 0, 12),
    distance: 534,
    duration: 810}];
var chart;

AmCharts.ready(function() {
    
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "date";
    chart.marginTop = 0;
    chart.autoMarginOffset = 5;
    chart.balloon.showBullet = false;

    // AXES
    // category axis
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD                
    categoryAxis.autoGridCount = false;
    categoryAxis.gridCount = 50;
    categoryAxis.gridAlpha = 0;
    categoryAxis.gridColor = "#000000";
    categoryAxis.axisColor = "#555555";
    // we want custom date formatting, so we change it in next line
    categoryAxis.dateFormats = [{
        period: 'DD',
        format: 'DD'},
    {
        period: 'WW',
        format: 'MMM DD'},
    {
        period: 'MM',
        format: 'MMM'},
    {
        period: 'YYYY',
        format: 'YYYY'}];

    // as we have data of different units, we create two different value axes
    // Duration value axis            
    var durationAxis = new AmCharts.ValueAxis();
    durationAxis.title = "duration";
    durationAxis.gridAlpha = 0.05;
    durationAxis.axisAlpha = 0;
    durationAxis.inside = true;
    // the following line makes this value axis to convert values to duration
    // it tells the axis what duration unit it should use. mm - minute, hh - hour...                
    durationAxis.duration = "mm";
    durationAxis.durationUnits = {
        DD: "d. ",
        hh: "h ",
        mm: "min",
        ss: ""
    };
    chart.addValueAxis(durationAxis);

    // Distance value axis 
    var distanceAxis = new AmCharts.ValueAxis();
    distanceAxis.title = "distance";
    distanceAxis.gridAlpha = 0;
    distanceAxis.position = "right";
    distanceAxis.inside = true;
    distanceAxis.unit = "mi";
    distanceAxis.axisAlpha = 0;
    chart.addValueAxis(distanceAxis);

    // GRAPHS
    // duration graph
    var durationGraph = new AmCharts.AmGraph();
    durationGraph.title = "duration";
    durationGraph.valueField = "duration";
    durationGraph.type = "line";
    durationGraph.valueAxis = durationAxis; // indicate which axis should be used
    durationGraph.lineColor = "#CC0000";
    durationGraph.balloonText = "[[value]]";
    durationGraph.lineThickness = 1;
    durationGraph.legendValueText = "[[value]]";
    durationGraph.bullet = "square";
    chart.addGraph(durationGraph);

     // CURSOR                
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.zoomable = false;
    chartCursor.categoryBalloonDateFormat = "DD";
    chartCursor.cursorAlpha = 0;
    chart.addChartCursor(chartCursor);

    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.bulletType = "round";
    legend.equalWidths = false;
    legend.valueWidth = 120;
    legend.color = "#000000";
    chart.addLegend(legend);
    
    // SET UP CLICK EVENTS
    
    // create prerequisite properties
    AmCharts.clickTimeout = 0;             // this will hold setTimeout reference
    AmCharts.lastClick = 0;                // last click timestamp
    AmCharts.doubleClickDuration = 300;    // distance between clicks in ms - if it's less than that - it's a doubleckick
    
    // let's define functions to actually do something on clicks/doubleclicks
    // you will want to replace the insides of these with your own code
    AmCharts.doSingleClick = function (event) {        
        //var div = document.getElementById("databody");
       var table=createTable();
       document.getElementById("databody").innerHTML=table;
      //div.innerHTML = "Ciao<br />" + div.innerHTML;
    }
    
    /*AmCharts.doDoubleClick = function (event) {
        var div = document.getElementById("events");
        div.innerHTML = "Double Click<br />" + div.innerHTML;
    }*/
    
    // create click handler
    AmCharts.myClickHandler = function (event) {
        var ts = (new Date()).getTime();
        if ((ts - AmCharts.lastClick) < AmCharts.doubleClickDuration) {
            // it's double click!
            // let's clear the timeout so the "click" event does not fire
            if (AmCharts.clickTimeout) {
                clearTimeout(AmCharts.clickTimeout);
            }
            
            // reset last click
            AmCharts.lastClick = 0;
            
            // now let's do whatever we want to do on double-click
            AmCharts.doDoubleClick(event);
        }
        else {
            // single click!
            // let's delay it to see if a second click will come through
            AmCharts.clickTimeout = setTimeout(function () {
                // let's do whatever we want to do on single click
                AmCharts.doSingleClick(event);
            }, AmCharts.doubleClickDuration);
        }
        AmCharts.lastClick = ts;
    }
    
    // add handler to the chart
    chart.addListener("clickGraphItem", AmCharts.myClickHandler);

    // WRITE                                
    chart.write("chartdiv");
});

＆＃13;

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#databody, #databody th, #databody td {
    border: 1px solid #ccc;
    padding: 10px;
}
#databody th {
    font-weight: bold;
    background-color: #eee;
}

div.box{
    width:360px !important;  width /**/:200px;
    height:190px !important; height /**/: 200px;
    padding: 4px;
    border:1px solid #EEE; border-right:0 solid;
    background:url(gradient.png) repeat-x fixed top left;
    overflow:auto
    }
}

＆＃13;

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="height: 362px;"></div>
<div class="box" id="databody">
</div>

＆＃13;

使用amCharts在工具提示上显示表格

1 个答案: