2017-10-03 11 views
0

グラフの背景の特定の範囲を2回強調表示する方法はありますか?特定の範囲のグラフを強調表示

ここでは、再作成したい例を示します。Example chart(実際はこれは私のグラフです。私はあなたに表示するために、Photoshopでハイライト領域を追加します)。

y軸は温度、x軸は日付時刻です。

これはjavascriptのである:

var chartData = generateData(); 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "marginRight": 80, 
    "autoMarginOffset": 20, 
    "marginTop": 7, 
    "dataProvider": chartData, 
    "valueAxes": [{ 
     "axisAlpha": 0.2, 
     "dashLength": 1, 
     "position": "left" 
    }], 
    "mouseWheelZoomEnabled": true, 
    "graphs": [{ 
     "id": "g1", 
     "balloonText": "[[value]]°", 
     "bullet": "round", 
     "bulletBorderAlpha": 1, 
     "bulletColor": "#FFFFFF", 
     "hideBulletsCount": 50, 
     "title": "red line", 
     "valueField": "temperature", 
     "useLineColorForBulletBorder": true, 
     "balloon": { 
      "drop": true 
     } 
    }], 
    "chartScrollbar": { 
     //"graph": "g1", 
     "oppositeAxis": false, 
     "scrollbarHeight": 30, 
     "dragIcon": "dragIconRectBig" 
    }, 
    "chartCursor": { 
     "limitToGraph": "g1", 
     "categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS" 
    }, 
    "categoryField": "date", 
    "dataDateFormat": "YYYY-MM-DD HH:NN:SS", 
    "categoryAxis": { 
     "minPeriod": "hh", 
     "parseDates": true, 
     "axisColor": "#DADADA", 
     "dashLength": 1, 
     "minorGridEnabled": true 
    }, 
    "export": { 
     "enabled": false 
    } 
}); 

chart.addListener("rendered", zoomChart); 
zoomChart(); 

// this method is called when chart is first inited as we listen for "rendered" event 
function zoomChart() { 
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
    chart.zoomToIndexes(chartData.length - 40, chartData.length - 1); 
    //chart.zoomToDates(new Date(@Model.ElementAt(2).Timestamp * 1000), new Date()); 
} 


function generateData() { 
    var data = []; 
    var date; 
    var temp; 
    @foreach (var wth in Model.OrderBy(e => e.Timestamp)) 
    { 
     <text> 
      debugger; 
      temp = @wth.Temperature; 
      date = new Date(@wth.Timestamp * 1000); 

      data.push({ 
       date: date, 
       temperature: temp 
      }); 
    </text> 
    } 
    return data; 
} 

答えて

0

あなたは、たとえば、開始/終了点を設定することにより、範囲を強調表示し、色を埋めるためにguidesを使用することができます。

"categoryAxis": { 
    // ... 
    "guides": [{ 
     "date": "2013-01-01", 
     "toDate": "2013-01-18", 
     "fillAlpha": .5, 
     "fillColor": "#00ff88" 
    }] 
} 

デモ:

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "marginRight": 40, 
 
    "marginLeft": 40, 
 
    "autoMarginOffset": 20, 
 
    "mouseWheelZoomEnabled":true, 
 
    "dataDateFormat": "YYYY-MM-DD", 
 
    "valueAxes": [{ 
 
     "id": "v1", 
 
     "axisAlpha": 0, 
 
     "position": "left", 
 
     "ignoreAxisWidth":true 
 
    }], 
 
    "balloon": { 
 
     "borderThickness": 1, 
 
     "shadowAlpha": 0 
 
    }, 
 
    "graphs": [{ 
 
     "id": "g1", 
 
     "balloon":{ 
 
      "drop":true, 
 
      "adjustBorderColor":false, 
 
      "color":"#ffffff" 
 
     }, 
 
     "bullet": "round", 
 
     "bulletBorderAlpha": 1, 
 
     "bulletColor": "#FFFFFF", 
 
     "bulletSize": 5, 
 
     "hideBulletsCount": 50, 
 
     "lineThickness": 2, 
 
     "title": "red line", 
 
     "useLineColorForBulletBorder": true, 
 
     "valueField": "value", 
 
     "balloonText": "<span style='font-size:18px;'>[[value]]</span>" 
 
    }], 
 
    "chartScrollbar": { 
 
     "graph": "g1", 
 
     "oppositeAxis":false, 
 
     "offset":30, 
 
     "scrollbarHeight": 80, 
 
     "backgroundAlpha": 0, 
 
     "selectedBackgroundAlpha": 0.1, 
 
     "selectedBackgroundColor": "#888888", 
 
     "graphFillAlpha": 0, 
 
     "graphLineAlpha": 0.5, 
 
     "selectedGraphFillAlpha": 0, 
 
     "selectedGraphLineAlpha": 1, 
 
     "autoGridCount":true, 
 
     "color":"#AAAAAA" 
 
    }, 
 
    "chartCursor": { 
 
     "pan": true, 
 
     "valueLineEnabled": true, 
 
     "valueLineBalloonEnabled": true, 
 
     "cursorAlpha":1, 
 
     "cursorColor":"#258cbb", 
 
     "limitToGraph":"g1", 
 
     "valueLineAlpha":0.2, 
 
     "valueZoomable":true 
 
    }, 
 
    "valueScrollbar":{ 
 
     "oppositeAxis":false, 
 
     "offset":50, 
 
     "scrollbarHeight":10 
 
    }, 
 
    "categoryField": "date", 
 
    "categoryAxis": { 
 
     "parseDates": true, 
 
     "dashLength": 1, 
 
     "minorGridEnabled": true, 
 
     "guides": [{ 
 
     \t "date": "2013-01-01", 
 
      "toDate": "2013-01-18", 
 
      "fillAlpha": .5, 
 
      "fillColor": "#00ff88" 
 
     }] 
 
    }, 
 
    "export": { 
 
     "enabled": true 
 
    }, 
 
    "dataProvider": [{ 
 
     "date": "2012-07-27", 
 
     "value": 13 
 
    }, { 
 
     "date": "2012-07-28", 
 
     "value": 11 
 
    }, { 
 
     "date": "2012-07-29", 
 
     "value": 15 
 
    }, { 
 
     "date": "2012-07-30", 
 
     "value": 16 
 
    }, { 
 
     "date": "2012-07-31", 
 
     "value": 18 
 
    }, { 
 
     "date": "2012-08-01", 
 
     "value": 13 
 
    }, { 
 
     "date": "2012-08-02", 
 
     "value": 22 
 
    }, { 
 
     "date": "2012-08-03", 
 
     "value": 23 
 
    }, { 
 
     "date": "2012-08-04", 
 
     "value": 20 
 
    }, { 
 
     "date": "2012-08-05", 
 
     "value": 17 
 
    }, { 
 
     "date": "2012-08-06", 
 
     "value": 16 
 
    }, { 
 
     "date": "2012-08-07", 
 
     "value": 18 
 
    }, { 
 
     "date": "2012-08-08", 
 
     "value": 21 
 
    }, { 
 
     "date": "2012-08-09", 
 
     "value": 26 
 
    }, { 
 
     "date": "2012-08-10", 
 
     "value": 24 
 
    }, { 
 
     "date": "2012-08-11", 
 
     "value": 29 
 
    }, { 
 
     "date": "2012-08-12", 
 
     "value": 32 
 
    }, { 
 
     "date": "2012-08-13", 
 
     "value": 18 
 
    }, { 
 
     "date": "2012-08-14", 
 
     "value": 24 
 
    }, { 
 
     "date": "2012-08-15", 
 
     "value": 22 
 
    }, { 
 
     "date": "2012-08-16", 
 
     "value": 18 
 
    }, { 
 
     "date": "2012-08-17", 
 
     "value": 19 
 
    }, { 
 
     "date": "2012-08-18", 
 
     "value": 14 
 
    }, { 
 
     "date": "2012-08-19", 
 
     "value": 15 
 
    }, { 
 
     "date": "2012-08-20", 
 
     "value": 12 
 
    }, { 
 
     "date": "2012-08-21", 
 
     "value": 8 
 
    }, { 
 
     "date": "2012-08-22", 
 
     "value": 9 
 
    }, { 
 
     "date": "2012-08-23", 
 
     "value": 8 
 
    }, { 
 
     "date": "2012-08-24", 
 
     "value": 7 
 
    }, { 
 
     "date": "2012-08-25", 
 
     "value": 5 
 
    }, { 
 
     "date": "2012-08-26", 
 
     "value": 11 
 
    }, { 
 
     "date": "2012-08-27", 
 
     "value": 13 
 
    }, { 
 
     "date": "2012-08-28", 
 
     "value": 18 
 
    }, { 
 
     "date": "2012-08-29", 
 
     "value": 20 
 
    }, { 
 
     "date": "2012-08-30", 
 
     "value": 29 
 
    }, { 
 
     "date": "2012-08-31", 
 
     "value": 33 
 
    }, { 
 
     "date": "2012-09-01", 
 
     "value": 42 
 
    }, { 
 
     "date": "2012-09-02", 
 
     "value": 35 
 
    }, { 
 
     "date": "2012-09-03", 
 
     "value": 31 
 
    }, { 
 
     "date": "2012-09-04", 
 
     "value": 47 
 
    }, { 
 
     "date": "2012-09-05", 
 
     "value": 52 
 
    }, { 
 
     "date": "2012-09-06", 
 
     "value": 46 
 
    }, { 
 
     "date": "2012-09-07", 
 
     "value": 41 
 
    }, { 
 
     "date": "2012-09-08", 
 
     "value": 43 
 
    }, { 
 
     "date": "2012-09-09", 
 
     "value": 40 
 
    }, { 
 
     "date": "2012-09-10", 
 
     "value": 39 
 
    }, { 
 
     "date": "2012-09-11", 
 
     "value": 34 
 
    }, { 
 
     "date": "2012-09-12", 
 
     "value": 29 
 
    }, { 
 
     "date": "2012-09-13", 
 
     "value": 34 
 
    }, { 
 
     "date": "2012-09-14", 
 
     "value": 37 
 
    }, { 
 
     "date": "2012-09-15", 
 
     "value": 42 
 
    }, { 
 
     "date": "2012-09-16", 
 
     "value": 49 
 
    }, { 
 
     "date": "2012-09-17", 
 
     "value": 46 
 
    }, { 
 
     "date": "2012-09-18", 
 
     "value": 47 
 
    }, { 
 
     "date": "2012-09-19", 
 
     "value": 55 
 
    }, { 
 
     "date": "2012-09-20", 
 
     "value": 59 
 
    }, { 
 
     "date": "2012-09-21", 
 
     "value": 58 
 
    }, { 
 
     "date": "2012-09-22", 
 
     "value": 57 
 
    }, { 
 
     "date": "2012-09-23", 
 
     "value": 61 
 
    }, { 
 
     "date": "2012-09-24", 
 
     "value": 59 
 
    }, { 
 
     "date": "2012-09-25", 
 
     "value": 67 
 
    }, { 
 
     "date": "2012-09-26", 
 
     "value": 65 
 
    }, { 
 
     "date": "2012-09-27", 
 
     "value": 61 
 
    }, { 
 
     "date": "2012-09-28", 
 
     "value": 66 
 
    }, { 
 
     "date": "2012-09-29", 
 
     "value": 69 
 
    }, { 
 
     "date": "2012-09-30", 
 
     "value": 71 
 
    }, { 
 
     "date": "2012-10-01", 
 
     "value": 67 
 
    }, { 
 
     "date": "2012-10-02", 
 
     "value": 63 
 
    }, { 
 
     "date": "2012-10-03", 
 
     "value": 46 
 
    }, { 
 
     "date": "2012-10-04", 
 
     "value": 32 
 
    }, { 
 
     "date": "2012-10-05", 
 
     "value": 21 
 
    }, { 
 
     "date": "2012-10-06", 
 
     "value": 18 
 
    }, { 
 
     "date": "2012-10-07", 
 
     "value": 21 
 
    }, { 
 
     "date": "2012-10-08", 
 
     "value": 28 
 
    }, { 
 
     "date": "2012-10-09", 
 
     "value": 27 
 
    }, { 
 
     "date": "2012-10-10", 
 
     "value": 36 
 
    }, { 
 
     "date": "2012-10-11", 
 
     "value": 33 
 
    }, { 
 
     "date": "2012-10-12", 
 
     "value": 31 
 
    }, { 
 
     "date": "2012-10-13", 
 
     "value": 30 
 
    }, { 
 
     "date": "2012-10-14", 
 
     "value": 34 
 
    }, { 
 
     "date": "2012-10-15", 
 
     "value": 38 
 
    }, { 
 
     "date": "2012-10-16", 
 
     "value": 37 
 
    }, { 
 
     "date": "2012-10-17", 
 
     "value": 44 
 
    }, { 
 
     "date": "2012-10-18", 
 
     "value": 49 
 
    }, { 
 
     "date": "2012-10-19", 
 
     "value": 53 
 
    }, { 
 
     "date": "2012-10-20", 
 
     "value": 57 
 
    }, { 
 
     "date": "2012-10-21", 
 
     "value": 60 
 
    }, { 
 
     "date": "2012-10-22", 
 
     "value": 61 
 
    }, { 
 
     "date": "2012-10-23", 
 
     "value": 69 
 
    }, { 
 
     "date": "2012-10-24", 
 
     "value": 67 
 
    }, { 
 
     "date": "2012-10-25", 
 
     "value": 72 
 
    }, { 
 
     "date": "2012-10-26", 
 
     "value": 77 
 
    }, { 
 
     "date": "2012-10-27", 
 
     "value": 75 
 
    }, { 
 
     "date": "2012-10-28", 
 
     "value": 70 
 
    }, { 
 
     "date": "2012-10-29", 
 
     "value": 72 
 
    }, { 
 
     "date": "2012-10-30", 
 
     "value": 70 
 
    }, { 
 
     "date": "2012-10-31", 
 
     "value": 72 
 
    }, { 
 
     "date": "2012-11-01", 
 
     "value": 73 
 
    }, { 
 
     "date": "2012-11-02", 
 
     "value": 67 
 
    }, { 
 
     "date": "2012-11-03", 
 
     "value": 68 
 
    }, { 
 
     "date": "2012-11-04", 
 
     "value": 65 
 
    }, { 
 
     "date": "2012-11-05", 
 
     "value": 71 
 
    }, { 
 
     "date": "2012-11-06", 
 
     "value": 75 
 
    }, { 
 
     "date": "2012-11-07", 
 
     "value": 74 
 
    }, { 
 
     "date": "2012-11-08", 
 
     "value": 71 
 
    }, { 
 
     "date": "2012-11-09", 
 
     "value": 76 
 
    }, { 
 
     "date": "2012-11-10", 
 
     "value": 77 
 
    }, { 
 
     "date": "2012-11-11", 
 
     "value": 81 
 
    }, { 
 
     "date": "2012-11-12", 
 
     "value": 83 
 
    }, { 
 
     "date": "2012-11-13", 
 
     "value": 80 
 
    }, { 
 
     "date": "2012-11-14", 
 
     "value": 81 
 
    }, { 
 
     "date": "2012-11-15", 
 
     "value": 87 
 
    }, { 
 
     "date": "2012-11-16", 
 
     "value": 82 
 
    }, { 
 
     "date": "2012-11-17", 
 
     "value": 86 
 
    }, { 
 
     "date": "2012-11-18", 
 
     "value": 80 
 
    }, { 
 
     "date": "2012-11-19", 
 
     "value": 87 
 
    }, { 
 
     "date": "2012-11-20", 
 
     "value": 83 
 
    }, { 
 
     "date": "2012-11-21", 
 
     "value": 85 
 
    }, { 
 
     "date": "2012-11-22", 
 
     "value": 84 
 
    }, { 
 
     "date": "2012-11-23", 
 
     "value": 82 
 
    }, { 
 
     "date": "2012-11-24", 
 
     "value": 73 
 
    }, { 
 
     "date": "2012-11-25", 
 
     "value": 71 
 
    }, { 
 
     "date": "2012-11-26", 
 
     "value": 75 
 
    }, { 
 
     "date": "2012-11-27", 
 
     "value": 79 
 
    }, { 
 
     "date": "2012-11-28", 
 
     "value": 70 
 
    }, { 
 
     "date": "2012-11-29", 
 
     "value": 73 
 
    }, { 
 
     "date": "2012-11-30", 
 
     "value": 61 
 
    }, { 
 
     "date": "2012-12-01", 
 
     "value": 62 
 
    }, { 
 
     "date": "2012-12-02", 
 
     "value": 66 
 
    }, { 
 
     "date": "2012-12-03", 
 
     "value": 65 
 
    }, { 
 
     "date": "2012-12-04", 
 
     "value": 73 
 
    }, { 
 
     "date": "2012-12-05", 
 
     "value": 79 
 
    }, { 
 
     "date": "2012-12-06", 
 
     "value": 78 
 
    }, { 
 
     "date": "2012-12-07", 
 
     "value": 78 
 
    }, { 
 
     "date": "2012-12-08", 
 
     "value": 78 
 
    }, { 
 
     "date": "2012-12-09", 
 
     "value": 74 
 
    }, { 
 
     "date": "2012-12-10", 
 
     "value": 73 
 
    }, { 
 
     "date": "2012-12-11", 
 
     "value": 75 
 
    }, { 
 
     "date": "2012-12-12", 
 
     "value": 70 
 
    }, { 
 
     "date": "2012-12-13", 
 
     "value": 77 
 
    }, { 
 
     "date": "2012-12-14", 
 
     "value": 67 
 
    }, { 
 
     "date": "2012-12-15", 
 
     "value": 62 
 
    }, { 
 
     "date": "2012-12-16", 
 
     "value": 64 
 
    }, { 
 
     "date": "2012-12-17", 
 
     "value": 61 
 
    }, { 
 
     "date": "2012-12-18", 
 
     "value": 59 
 
    }, { 
 
     "date": "2012-12-19", 
 
     "value": 53 
 
    }, { 
 
     "date": "2012-12-20", 
 
     "value": 54 
 
    }, { 
 
     "date": "2012-12-21", 
 
     "value": 56 
 
    }, { 
 
     "date": "2012-12-22", 
 
     "value": 59 
 
    }, { 
 
     "date": "2012-12-23", 
 
     "value": 58 
 
    }, { 
 
     "date": "2012-12-24", 
 
     "value": 55 
 
    }, { 
 
     "date": "2012-12-25", 
 
     "value": 52 
 
    }, { 
 
     "date": "2012-12-26", 
 
     "value": 54 
 
    }, { 
 
     "date": "2012-12-27", 
 
     "value": 50 
 
    }, { 
 
     "date": "2012-12-28", 
 
     "value": 50 
 
    }, { 
 
     "date": "2012-12-29", 
 
     "value": 51 
 
    }, { 
 
     "date": "2012-12-30", 
 
     "value": 52 
 
    }, { 
 
     "date": "2012-12-31", 
 
     "value": 58 
 
    }, { 
 
     "date": "2013-01-01", 
 
     "value": 60 
 
    }, { 
 
     "date": "2013-01-02", 
 
     "value": 67 
 
    }, { 
 
     "date": "2013-01-03", 
 
     "value": 64 
 
    }, { 
 
     "date": "2013-01-04", 
 
     "value": 66 
 
    }, { 
 
     "date": "2013-01-05", 
 
     "value": 60 
 
    }, { 
 
     "date": "2013-01-06", 
 
     "value": 63 
 
    }, { 
 
     "date": "2013-01-07", 
 
     "value": 61 
 
    }, { 
 
     "date": "2013-01-08", 
 
     "value": 60 
 
    }, { 
 
     "date": "2013-01-09", 
 
     "value": 65 
 
    }, { 
 
     "date": "2013-01-10", 
 
     "value": 75 
 
    }, { 
 
     "date": "2013-01-11", 
 
     "value": 77 
 
    }, { 
 
     "date": "2013-01-12", 
 
     "value": 78 
 
    }, { 
 
     "date": "2013-01-13", 
 
     "value": 70 
 
    }, { 
 
     "date": "2013-01-14", 
 
     "value": 70 
 
    }, { 
 
     "date": "2013-01-15", 
 
     "value": 73 
 
    }, { 
 
     "date": "2013-01-16", 
 
     "value": 71 
 
    }, { 
 
     "date": "2013-01-17", 
 
     "value": 74 
 
    }, { 
 
     "date": "2013-01-18", 
 
     "value": 78 
 
    }, { 
 
     "date": "2013-01-19", 
 
     "value": 85 
 
    }, { 
 
     "date": "2013-01-20", 
 
     "value": 82 
 
    }, { 
 
     "date": "2013-01-21", 
 
     "value": 83 
 
    }, { 
 
     "date": "2013-01-22", 
 
     "value": 88 
 
    }, { 
 
     "date": "2013-01-23", 
 
     "value": 85 
 
    }, { 
 
     "date": "2013-01-24", 
 
     "value": 85 
 
    }, { 
 
     "date": "2013-01-25", 
 
     "value": 80 
 
    }, { 
 
     "date": "2013-01-26", 
 
     "value": 87 
 
    }, { 
 
     "date": "2013-01-27", 
 
     "value": 84 
 
    }, { 
 
     "date": "2013-01-28", 
 
     "value": 83 
 
    }, { 
 
     "date": "2013-01-29", 
 
     "value": 84 
 
    }, { 
 
     "date": "2013-01-30", 
 
     "value": 81 
 
    }] 
 
}); 
 

 
chart.addListener("rendered", zoomChart); 
 

 
zoomChart(); 
 

 
function zoomChart() { 
 
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1); 
 
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv" style="width: 100%; height: 300px;"></div> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t

+0

恐ろしいです、ありがとうございます@xorspark、私は何時間も探しています。わたしは、あなたを愛しています!! = D –

関連する問題