morris.js

问题 I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar. I have setup a JSBIN example for the same here: When you hover over the bar it shows the index of the bar at the bottom. I want to show the

问题 Hi recently i tried Morris Area Charts , and it is good one . But the thing its difficult to understand how the data is fetched there . I have seen the document https://morrisjs.github.io/morris.js/lines.html , & i make sample graph here var data = [ { y: '2014', a: 50, b: 90}, { y: '2015', a: 65, b: 75}, { y: '2016', a: 50, b: 50}, { y: '2017', a: 75, b: 60}, { y: '2018', a: 80, b: 65}, { y: '2019', a: 90, b: 70}, { y: '2020', a: 100, b: 75}, { y: '2021', a: 115, b: 75}, { y: '2022', a: 120,

问题 I want to change Label Color in Morris Donut chart: For BusStop: Label Color should be Red For Fence: Label Color should be Blue For Route: Label Color Should be Yellow or anything... Code Pen Example I tried by doing: data: [ { label: 'BusStop', value:5, labelColor:"#EC407A", }, { label: 'Fence', value: 6, labelColor:"#00897B", }, { label: 'Route', value: 2, labelColor:"#C0CA33", } ], labelColor:"#9CC4E4", //this is Constant for all label but I need customized labelColors It's ok, if it is

问题 I'm currently running into a problem using the morris donut chart. In general, my project is required to be available on both touch devices as well as standard devices. We have set the donut chart up so that clicking on one section links you to another page which filters content based on which section you clicked. This one is working like a charm - but not on mobile devices. As hovering brings up the description of the section (in our case a priority plus how many items with that specific

问题 I want to develop an interactive chart using a JS library. In this chart I want to have buttons (inside the chart), in this way (in red): I want also to change the line type (dotted for example). I tried Morris.js but this lib is not allowing me to do what I want to do. Is there any other library that I can use instead ? 回答1: That's possible with Morris.js , but you need to add some code to Morris (latest version 0.5.1) to draw dotted lines: Extend Morris and add a parameter called lineStyle

问题 I have a class: public class StatististikaByCustomer { public string data { get; set; } // Array or String? public string xkey {get;set;} public Array ykey {get;set;} public Array labels {get;set;} } How can I get JSON like this? { "data":[ { "timeinterval":"2015-10-22T00:00:00", "Firm":4, "Firm1":4, "Firm2":22, "Firm3":30, "Firm4":19 }, { "timeinterval":"2015-10-23T00:00:00", "Firm":2, "Firm1":5, "Firm2":29, "Firm3":34, "Firm4":219 } ], "xkey":"timeinterval", "ykey":["Firm","Firm1","Firm2",

问题 I'm getting trouble in making what I want morris.js charts to do. My goal is to be able to toggle specific lines based on input[type=checkbox] value. So far here's what I have done: JS code var morris = Morris.Line({ element: 'line-example', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: [

问题 I've set up bar chart. Data for default/when page loads I get via php. This part it is ok and works (I've followed some example that was on the web.) function init_morris_charts() { if( typeof (Morris) === 'undefined'){ return; } console.log('init_morris_charts'); if ($('#graph_bar').length){ morbar = Morris.Bar({ element: 'graph_bar', data: [ <?php echo $tocke; ?> ], xkey: 'date', ykeys: ['marketcap'], labels: ['Market cap value USD'], barRatio: 0.4, barColors: ['#aa8400'], xLabelAngle: 0,

问题 I have very long labels on my morris donut graphs. Because of their long it's very hard to read. I would like to have some kind of popup with label when I hover on that text. But there are no css classes to bind a handler. js code: Morris.Donut({ element: 'donut-example', data: [ {label: "Download SalesD DDDDDDDDDDDDDDDDD", value: 12}, {label: "In-Store Sales AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", value: 30}, {label: "Mail-Order Sales VVVVVVVVVVVVVVV", value: 20} ] }); I've tried formatter,

问题 I have a strange error on the morris.js graphing library this works in graphs.js $(document).ready(function() { Morris.Line({ element: 'annual', data: [ {y: '2012', a: 100}, {y: '2011', a: 75}, {y: '2010', a: 50}, {y: '2009', a: 75}, {y: '2008', a: 50}, {y: '2007', a: 75}, {y: '2006', a: 100} ], xkey: 'y', ykeys: ['a'], labels: ['Series A'] }); }) this does not graphs.js $(document).ready(function() { Morris.Line({ element: 'annual', data: $('#logs_chart').data('logs'), xkey: 'y', ykeys: ['a'