Eug*_*nio 28 javascript charts chart.js
使用Chart.js 1.x我可以创建一个饼图并自动分配颜色:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>
如果我对v 2.x做同样的事情
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Conservative", "Democratic"],
datasets: [{
data: [5, 15],
}]
}
});
</script>
</body>
除非我手动指定颜色,否则整个饼图以灰色显示; 我错过了什么吗？我发现的唯一相关问题是这一个:Chart.js中的随机填充颜色,但是,如上所述,它完全适用于1.x所以我觉得它不再适用了.
xna*_*kos 60
我相信配色方案的创造本身就是一门完整的科学.我觉得这样的事情已经被Chart.js遗漏了,因为有更多的关键目标需要追求.文档中的图表示例中使用的所有颜色都是明确定义的.而这两个月之久的问题带有特色chart.js之构件,其默认的颜色不是chart.js之二可用,因此,你有三种选择一个明确的答复.第一选择是自己制作一些颜色.我想你不会问这个问题,你有没有这样的事情(我知道结果会很糟糕,如果我这样做的话).第二种选择是在线寻找配色方案和配色方案,并选择一些让你满意的配色方案.第三个也是有趣的选择是寻找一个可以随意生成配色方案的JavaScript库.有几种替代选择.一个很好的,在非常宽松的许可下可用的是调色板生成器.您可以在此处看到Chart.js 2中的操作.样品也可在下面找到:
var ctx = document.getElementById("myChart");
var myData = [12, 19, 3, 5, 2, 3];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"],
datasets: [{
label: '# of Votes',
data: myData,
backgroundColor: palette('tol', myData.length).map(function(hex) {
return '#' + hex;
})
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://raw.githubusercontent.com/google/palette.js/master/palette.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>这里描述了如何使用库.简而言之,您可以使用以下方法从特定颜色方案创建10色调色板:
var seq = palette('tol-sq', 10);
结果是一个十六进制字符串数组(例如"eee8d5").为了在Chart.js期望颜色的地方使用它,你可以使用map在每个字符串前加上"#",就像上面的例子一样.
我实际上会推荐ChartsJS-Plugin-ColorSchemes。只需在chartjs之后将其导入就可以自动进行着色，但是添加选项将使您能够制作自定义调色板。
...
options: {
plugins: {
colorschemes: {
scheme: 'tableau.Tableau20'
}
}
}
| 归档时间： |
|
| 查看次数： |
24997 次 |
| 最近记录： |