使用Highcharts代码生成器工具中的代码将Y轴上的数字显示为百分比？

Question

我是一个非营利性新闻组织的创始人，也是INN (非营利新闻研究所)的成员。我们中的一些成员通过INN免费托管我们的wordpress新闻网站，因此，不能只安装我们想要的任何插件。客栈必须先批准。

所以我使用Highcharts的唯一方法是使用Builtvisible中的这个工具，这是一个Highcharts代码生成器：https://builtvisible.com/highcharts-generator/

我在这里做了一个柱状图，这是一个新生儿筛查的故事，是晚点样本比例最高的10家医院。因此，当我将鼠标悬停在每个栏上时，我只希望工具提示显示73%，而不是像现在这样显示73%。

任何帮助都将不胜感激。我对编码不是很了解，我尝试过一些事情，甚至联系了构建这个代码生成器的人，但我不知道如何让它工作。对于另一个柱状图，我也有同样的问题，但我需要它用逗号而不是空格来分隔数千。所以我希望有1000人这样读，而不是1000人。

下面是生成器中的代码，我需要它来显示百分比：

<div id="chart_container"></div><script src="//code.highcharts.com/adapters/standalone-framework.js"></script><script src="//code.highcharts.com/highcharts.js"></script><script>new Highcharts.Chart({"chart":{"backgroundColor":"#fefefe","renderTo":"chart_container","type":"column"},"title":{"text":"Top-10 facilities for lateness"},"colors":["#476974","#3ca1c1","#4ccbf4","#96dff6","#c9e8f6"],"legend":{"enabled":true,"margin":30},"xAxis":{"tickWidth":0,"labels":{"y":20},"categories":["Facilities with the highest overall percentage of late samples"]},"yAxis":{"tickWidth":0,"labels":{"y":-5},"title":{"text":"Percentage (%)"}},"series":[{"name":"NE MT HLTH SERVICES WOLF POINT","data":[73]},{"name":"CLARK FORK VALLEY HOSPITAL","data":[71]},{"name":"MARCUS DALY HOSPITAL","data":[68]},{"name":"ST JOSEPH HOSPITAL","data":[65]},{"name":"SIDNEY HEALTH CENTER","data":[64]},{"name":"THE BIRTH CENTER, MISSOULA","data":[63]},{"name":"GLENDIVE MEDICAL CENTER","data":[59]},{"name":"FRANCES MAHON DEAC HOSPITAL","data":[57]},{"name":"ST LUKE HOSPITAL","data":[55]},{"name":"CABINET PEAKS MEDICAL CENTER","data":[53]}]});</script>    

这是另一个柱状图，当您将鼠标悬停在每一列上时，我希望用逗号分隔数千个柱状图，它会显示工具提示。这也是来自Builtvisible Highcharts代码生成器的代码：

<div id="chart_container2"></div>
<script src="//code.highcharts.com/adapters/standalone-framework.js"></script><script src="//code.highcharts.com/highcharts.js"></script><script>// <![CDATA[
new Highcharts.Chart({"chart":{"backgroundColor":"#fefefe","renderTo":"chart_container2","type":"column"},"title":{"text":"Wisconsin Lab: On-Time Performance"},"colors":["#6AA121","#2069A1","#A12069","#96dff6","#c9e8f6"],"legend":{"enabled":true,"margin":30},"xAxis":{"tickWidth":0,"labels":{"y":20},"categories":["2011","2012","2013","2014"]},"yAxis":{"tickWidth":0,"labels":{"y":-5},"title":{"text":"Number of samples on-time vs. late"}},"series":[{"name":"On-time","data":[7006,5492,5589,7069]},{"name":"Late","data":[3857,4979,5189,4105]},{"name":"Very Late","data":[701,1075,1074,776]}]});
// ]]></script>    

Answer 1

这个“工具代码”只是常规的Highcharts代码，它只会为你生成它。

对于第一个图表，您可以使用valueSuffix在该值后面添加一个百分号。代码：

plotOptions: {
    column: {
        tooltip: {
            valueSuffix: '%'
        }
    }
}

对于第二个图表，您可以使用全局thousandSep选项来获取逗号分隔符。代码：

Highcharts.setOptions({
    lang: {
        thousandsSep: ','
    }
});

请参阅两个代码段的this JSFiddle demonstration。