我有3个查询 . 1)如何在条形图中添加自定义颜色?例如,在附图中,我想为Metric Pink和Blue添加不同的颜色 . 2)我想将水平线显示为例如目标/目标值 . 在y轴上为3.0k . 3)图表应按1月,2月,3月,4月的顺序呈现x轴值,这是现在没有发生的 . 请指教 .
<div class="row"> <div id="test" class="column"> <h2> Pink and Blue Distribution</h2> <script type="text/javascript"> var svg = dimple.newSvg("#test", 590,400); var json = JSON.parse('${rlog}'); var data = [ {"Month": "Jan", "Metric": "Pink", "Value": 200}, {"Month": "Feb", "Metric": "Pink", "Value": 320}, {"Month": "Mar", "Metric": "Pink", "Value": 200}, {"Month": "Apr", "Metric": "Pink", "Value": 320}, {"Month": "Jan", "Metric": "Blue", "Value": 1000}, {"Month": "Feb", "Metric": "Blue", "Value": 2500}, {"Month": "Mar", "Metric": "Blue", "Value": 1500}, {"Month": "Apr", "Metric": "Blue", "Value": 3001} ]; var chart = new dimple.chart(svg, data); chart.setBounds(80, 30, 480,330); var x = chart.addCategoryAxis("x",["Month","Metric"]); var y1 = chart.addMeasureAxis("y", "Value"); var bars = chart.addSeries("Metric", dimple.plot.bar, [x, y1]); bars.barGap = 0.5; chart.addLegend(65, 10, 510, 20, "right"); chart.draw(); </script> </div> </div>
2 回答
试试吧
http://jsfiddle.net/cmubick/n5x0gkdy/
1)自定义颜色:
2)值= 3000的水平线:
3)按月排序x轴
对于2)你可以使用下面这样的东西来添加水平线 . 我使用以下代码生成规则(水平网格线)